如何在$（document）.ready（function（）{}）中使用for循环？
[英]How can I use a for-loop within a $(document).ready(function(){})?
问题描述
I've been trying to modify code I found here: http://www.w3schools.com/jquery/jquery_hide_show.asp to have multiple hide buttons linked with multiple paragraphs. 
我一直在尝试修改在这里找到的代码： http : //www.w3schools.com/jquery/jquery_hide_show.asp，以使多个隐藏按钮与多个段落链接。 The number of paragraphs/buttons is variable--so I'd need it to work with a for-loop or while loop. 段落/按钮的数量是可变的-所以我需要它与for循环或while循环一起使用。
I've gotten it to work this far: 我已经做到了这一点：
<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>
But when I try to replace the inside of that $(document).ready(function(){}) with a for-loop it quits working. 但是，当我尝试用for循环替换$（document）.ready（function（）{}）的内部时，它退出了工作。 So, why doesn't this code below do anything? 那么，下面的这段代码为什么不做任何事情？
var m,k=3;
$(document).ready(function(){
for (m = 1; m <=k; m++) {
$('.x'+m).click(function(){ $('.file'+m).toggle(1000);});
}
});
5 个解决方案
解决方案1
2 2015-03-15 03:27:29
解决方案2
2 已采纳 2015-03-15 03:29:11
Your html has a problem, so assuming the button & the target elements are not siblings you can 您的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>
then 然后
$(document).ready(function () {
$('.x').click(function () {
$($(this).data('target')).toggle(1000);
});
});
解决方案3
0 2015-03-15 03:28:08
解决方案4
0 2015-03-15 03:43:03
This would do in the way you planned to do it, ie using a for loop 这将按照您计划的方式进行，即使用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);
}
});
I would however do something like this 但是我会做这样的事情
$(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>
You would be using fewer class names ie file1, file2 and x1, x2 etc.. 您将使用较少的类名，即file1，file2和x1，x2等。
解决方案5
0 2015-03-15 04:39:01
Here are already a lot of good answers. 这里已经有很多不错的答案。 I'd like to specifically add something crucial about JavaScript. 我想特别添加一些关于JavaScript的关键信息。
The problem is not the for loop in your function , but the function definition inside your for loop. 这个问题是不是for你的循环function ，但该function的内部定义for循环。
Differ between the compile time of a function and its execution time. function的编译时间与其执行时间之间存在差异。 In your example, compile time is during the for loop, execution time is at the moment of clicking. 在您的示例中，编译时间是在for循环中，执行时间是在单击时。 How can you expect your variable m to be the same while compile time like at execution time? 在编译时（如在执行时），如何期望变量m相同？ If it is not the same, how can your code work? 如果不一样，您的代码如何工作？
Once your code has left the loop, anything may happen to m , and at the clicking time, m is not valid as you expect it. 一旦代码离开循环， m可能会发生任何事情，并且在单击时， m无效，正如您所期望的那样。
This is only one example, here is more about why defining function s in loops may be puzzling: http://jslinterrors.com/dont-make-functions-within-a-loop 这只是一个例子，这里更多地说明了为什么在循环中定义function可能令人费解： http : //jslinterrors.com/dont-make-functions-within-a-loop
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.