[英]How can I use a for-loop within a $(document).ready(function(){})?
我一直在尝试修改在这里找到的代码： http : //www.w3schools.com/jquery/jquery_hide_show.asp，以使多个隐藏按钮与多个段落链接。 段落/按钮的数量是可变的-所以我需要它与for循环或while循环一起使用。
我已经做到了这一点：
<script>
$(document).ready(function(){
$('.x'+1).click(function(){ $('.file'+1).toggle(1000);});
$('.x'+2).click(function(){ $('.file'+2).toggle(1000);});
$('.x'+3).click(function(){ $('.file'+3).toggle(1000);});
});
</script>
</head>
<body>
<li class="file1">This is a paragraph with little content.</li>
<button class="x1">hide</button>
<p>
<li class="file2">This is another small paragraph.</li>
<button class="x2">hide</button>
<p>
<li class="file3">This is a paragraph.</li>
<button class="x3">hide</button>
</body>
</html>
但是，当我尝试用for循环替换$（document）.ready（function（）{}）的内部时，它退出了工作。 那么，下面的这段代码为什么不做任何事情？
var m,k=3;
$(document).ready(function(){
for (m = 1; m <=k; m++) {
$('.x'+m).click(function(){ $('.file'+m).toggle(1000);});
}
});
更新此代码。 DEMO
$(document).ready(function(){
$('button[class^="x"').click(function(){ $(this).prev('li').toggle(1000);});
});
同样你的HTML是无效的，所以写正确的HTML代码，所以我可以更详细地解释
您的html有问题，因此假设按钮和目标元素不是同级，您可以
<li class="file1">This is a paragraph with little content.</li>
<button class="x" data-target=".file1">hide</button>
<li class="file2">This is another small paragraph.</li>
<button class="x" data-target=".file2">hide</button>
<li class="file3">This is a paragraph.</li>
<button class="x" data-target=".file3">hide</button>
然后
$(document).ready(function () {
$('.x').click(function () {
$($(this).data('target')).toggle(1000);
});
});
演示： 小提琴
这将按照您计划的方式进行，即使用for循环
$(document).ready(function() {
function addClickHandler(i) {
$('.x'+i).click(function(){ $('.file'+i).toggle(1000);});
}
var j;
for(j = 1; j <=3; j++) {
addClickHandler(j);
}
});
但是我会做这样的事情
$(document).ready(function() { $(".file button").click(function() { $(this).prev().toggle(1000); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="file"> <p>This is file 1</p> <button>Click me</button> </div> <div class="file"> <p>This is file 2</p> <button>Click me</button> </div> <div class="file"> <p>This is file 2</p> <button>Click me</button> </div>
您将使用较少的类名，即file1，file2和x1，x2等。
这里已经有很多不错的答案。 我想特别添加一些关于JavaScript的关键信息。
这个问题是不是for你的循环function ，但该function的内部定义for循环。
function的编译时间与其执行时间之间存在差异。 在您的示例中，编译时间是在for循环中，执行时间是在单击时。 在编译时（如在执行时），如何期望变量m相同？ 如果不一样，您的代码如何工作？
一旦代码离开循环， m可能会发生任何事情，并且在单击时， m无效，正如您所期望的那样。
这只是一个例子，这里更多地说明了为什么在循环中定义function可能令人费解： http : //jslinterrors.com/dont-make-functions-within-a-loop
如何将相同的$（document）.ready（function（）用于多个输入？
[英]How can I use the same $(document).ready(function() for multiple inputs?
如果已经使用onload或document.ready调用了Javascript中的函数，我如何调用它？
[英]How can i invoke a function within Javascript when its already invoked with onload or document.ready?
如何有效地使用yepnope.js和$（document）.ready（）？
[英]How can I use yepnope.js with $(document).ready() effectively?
如何访问iframe的$（document）.ready（function（）{}）中包含的函数？
[英]How can I access the functions wrapped in the $(document).ready(function(){}) of an iframe?
如何执行一个 for-loop function，然后在 for-loop function 完成一个按钮后调用另一个 function？
[英]How can I execute one for-loop function, then call another function after the for-loop function is complete with a button?
为什么我不能使用onClick在jQuery $（document）.ready函数中执行函数？
[英]Why can't I use onClick to execute a function inside a jQuery $(document).ready function?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.