如何在 $(document).ready(function(){}) 中使用 for 循环？

Question

我一直在尝试修改我在此处找到的代码：http://www.w3schools.com/jquery/jquery_hide_show.asp 有多个隐藏按钮与多个段落链接。 paragraphs/buttons 的数量是可变的——所以我需要它来处理 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);});
    }
  });

Answer 1

更新此代码。 DEMO

 $(document).ready(function(){
    $('button[class^="x"').click(function(){ $(this).prev('li').toggle(1000);});
 });

你的 html 也无效，所以请编写正确的 HTML 代码，以便我可以更详细地解释

Answer 2

尝试使用 .each 循环

$('button[class^=x]').click(function(){ 
    $(this).prev("li").toggle(1000);
});

Demo

Answer 3

你的 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);
    });
});

演示：Fiddle

Answer 4

这将按照您计划的方式进行，即使用 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>

您将使用更少的 class 个名称，即 file1、file2 和 x1、x2 等。

Answer 5

这里已经有很多好的答案了。我想特别添加一些关于 JavaScript 的重要内容。

问题不在于 function 中的 for 循环，而是 for 循环中的 function 定义。

function 的编译时间与其执行时间不同。在您的示例中，编译时间是在 for 循环期间，执行时间是在单击时。你怎么能期望你的变量 m 在编译时和执行时一样呢？如果不一样，你的代码如何工作？

一旦您的代码离开循环，m 可能会发生任何事情，并且在点击时，m 并不像您期望的那样有效。

这只是一个例子，更多关于为什么在循环中定义 functions 可能令人费解： http://jslinterrors.com/dont-make-functions-within-a-loop

如何在 $(document).ready(function(){}) 中使用 for 循环？

How can I use a for-loop within a $(document).ready(function(){})?

javascript

jquery

for-loop