jQuery动态添加/删除滚动不起作用
[英]jQuery adding/removing scroll dynamically not working
问题描述
I am making a post scenario and I am trying to add a scroll dynamically when the dynamic input.length reached a certain point. 
我正在制作一个帖子场景，我试图在动态input.length达到某一点时动态添加一个滚动。 My case when there is more than 5 dynamic input IS created, a verticle scroll is added so the div won't take any more verticle body length, also removing the scroll when the user removes to where the inputs are less than 5. Why my code is not working?. 我的情况是，当创建了超过5个动态输入时，添加了一个Verticle滚动，因此div不会再占用Verticle体长，当用户移除到输入小于5的位置时也会删除滚动。为什么我的代码不工作？ I do want to do this dynamically based on the number of created inputs, not using CSS to make a set height. 我想根据创建的输入数量动态执行此操作，而不是使用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>
1 个解决方案
解决方案1
3 已采纳 2018-03-09 18:17:50
It looks like you're trying to create some function pointers (or function variables if you prefer) 看起来你正在尝试创建一些函数指针（或者你喜欢的函数变量）
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();
as jquery using chaining, most calls will return the original jquery object, so: 作为使用链接的jquery，大多数调用将返回原始的jquery对象，因此：
var add_scroll = wrapper.css("overflow", "scroll");
add_scroll === wrapper
so calling add_scroll; 所以调用add_scroll; makes the same sense as wrapper; 和wrapper;一样有意义wrapper; or $("#wrapper") - ie does nothing. 或$("#wrapper") - 即什么都不做。
You need to convert them to functions and then call them as such; 你需要将它们转换为函数然后调用它们;
var add_scroll = function() { wrapper.css("overflow", "scroll") };
...
add_scroll(); // not the extra () to call the method
Next, when you call: 接下来，当你打电话：
var wrapper = $(".input_fields_wrap");
it returns just the div with class "input_fields_wrap". 它只返回类“input_fields_wrap”的div。 As there's only ever one of these, wrapper.length will always ===1 . 因为只有其中一个， wrapper.length总是===1 。
You're interesting in how many inputs there are inside the wrapper, so change the check to: 您对包装器中有多少输入感兴趣，因此请将检查更改为：
wrapper.find("input").length
You're then checking if ..length > 5 and ..length < 5 - what if length === 5 ? 然后你要检查..length > 5和..length < 5 - 如果length === 5怎么办？ sometimes 5 will have a scroll, sometimes it won't (depending on whether you're adding or removing), so change to a simple if/else 有时5会有滚动，有时它不会（取决于你是否添加或删除），所以更改为简单的if / else
if (wrapper.find("input").length) > 5)
add_scroll();
else
remove_scroll();
Finally, you can use the same test for your max limit, so no need to keep track of how many, giving: 最后，您可以对最大限制使用相同的测试，因此无需跟踪多少，给出：
$(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>
If you run the above snippet, you'll find that it adds the scroll bars, but doesn't actually make them scroll as the wrapper div expands to fit the content . 如果你运行上面的代码片段，你会发现它添加了滚动条，但实际上并没有让它们滚动，因为包装器div 扩展以适应内容 。
To actually make them scroll, you'll need to add a max-height.... which leads back to my original (deleted) comment that you just set max-height:500px;overflow-y:auto; 要实际让它们滚动，你需要添加一个max-height ....这会返回到我刚设置max-height:500px;overflow-y:auto;原始（删除）注释max-height:500px;overflow-y:auto; (actual height depending on number of inputs) :) （实际高度取决于输入数量）:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.