本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

jQuery 动态添加/删除滚动不起作用

发布于2021-08-24 13:29     阅读(1032)     评论(0)     点赞(19)     收藏(5)


我正在制作一个帖子场景,当动态 input.length 达到某个点时,我试图动态添加滚动。我创建了超过 5 个动态输入时的情况,添加了一个垂直滚动,因此 div 不会占用更多的垂直主体长度,当用户删除输入小于 5 的位置时也会删除滚动。为什么我的代码不起作用?。我确实想根据创建的输入数量动态执行此操作,而不是使用 CSS 来设置高度。

$(document).ready(function() {
    var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    console.log('check length', wrapper.length);

    var add_scroll = wrapper.css("overflow", "scroll");
    var remove_scroll = wrapper.css("overflow", "hidden");

    function checkForScroll() {

        if (wrapper.length > 5) {
            add_scroll;
        }
        if (wrapper.length < 5) {
            remove_scroll;
        }
    }
    checkForScroll();


    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
            checkForScroll()
            console.log('check length', wrapper.length);

        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
        checkForScroll()
        console.log('check length', wrapper.length);

    })
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
      <div class="input_fields_wrap">
            <button class="add_field_button">Add More Fields</button>
            <div><input type="text" name="mytext[]"></div>
        </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>


解决方案


看起来您正在尝试创建一些函数指针(或函数变量,如果您愿意)

var add_scroll = wrapper.css("overflow", "scroll");
var remove_scroll = wrapper.css("overflow", "hidden");

function checkForScroll() {
    if (wrapper.length > 5) {
        add_scroll;
    }
    if (wrapper.length < 5) {
        remove_scroll;
    }
}
checkForScroll();

由于 jquery 使用链接,大多数调用将返回原始 jquery 对象,因此:

var add_scroll = wrapper.css("overflow", "scroll");
add_scroll === wrapper

所以调用add_scroll;wrapper;or具有相同的意义$("#wrapper")- 即什么都不做。

您需要将它们转换为函数,然后这样调用它们;

var add_scroll = function() { wrapper.css("overflow", "scroll") };
...
add_scroll();  // not the extra () to call the method

接下来,当你打电话时:

var wrapper = $(".input_fields_wrap");

它只返回带有“input_fields_wrap”类的 div。由于只有其中之一,因此wrapper.length将始终===1

您对包装器内有多少输入很感兴趣,因此将检查更改为:

wrapper.find("input").length

然后你检查是否..length > 5..length < 5- 如果length === 5有时 5 会有滚动,有时不会(取决于您是添加还是删除),因此更改为简单的 if/else

if (wrapper.find("input").length) > 5)
    add_scroll();
else
    remove_scroll();

最后,您可以对最大限制使用相同的测试,因此无需跟踪有多少,给出:

$(document).ready(function() {
  var max_fields = 100; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  
  var add_scroll = function() { wrapper.css("overflow", "scroll"); };
  var remove_scroll = function() { wrapper.css("overflow", "hidden"); };

  function checkForScroll() {
    console.log("input length", wrapper.find("input").length)
    if (wrapper.find("input").length > 5)
      add_scroll();
    else 
      remove_scroll();
  }
  checkForScroll();

  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (wrapper.find("input").length < max_fields) {
      //max input box allowed
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
      checkForScroll()
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    checkForScroll()
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div><input type="text" name="mytext[]"></div>
</div>

如果您运行上面的代码段,您会发现它添加了滚动条,但实际上并没有在包装器 div扩展以适应内容时使它们滚动

要真正使它们滚动,您需要添加一个 max-height.... 这会导致您刚刚设置的原始(已删除)评论max-height:500px;overflow-y:auto;(实际高度取决于输入数量):)




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/181540/57472d83861b9bef7e49/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)