jQuery 动态添加/删除滚动不起作用-前端黑洞网

本站消息

站长简介/公众号

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

黑洞官方问答小能手

487683

文章

249176466

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2021-08-24 13:29 阅读(1308) 评论(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;（实际高度取决于输入数量）:)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果