Question

我正在制作一个帖子场景，我试图在动态input.length达到某个点时动态添加一个滚动。我的情况是，当创建了超过5个动态输入时，添加了一个Verticle滚动，因此div不会再占用Verticle体长，当用户移除到输入小于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>

Answer 1

看起来你正在尝试创建一些函数指针（或者你喜欢的函数变量）

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;或$("#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:500px;overflow-y:auto;的原始（已删除）注释（实际高度取决于输入数量））：）

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

1 个答案: