j查询添加/删除滚动动态不起作用

我正在制作一个帖子场景，并且当动态输入长度达到某个点时，我正在尝试动态添加滚动。我的情况是，当创建超过 5 个动态输入 IS 时，会添加一个垂直滚动，这样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;或$("#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;(实际高度取决于输入数量):)的原始(已删除)评论

相关内容

最新更新

热门标签：