Question

我一直在尝试修改我在此处找到的代码：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);});
    }
  });

Answer 1

更新此代码。 DEMO

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

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

Answer 2

你的HTML有问题，所以假设按钮＆amp;目标元素不是你可以

的兄弟姐妹

<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 3

使用.each循环

尝试此操作

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

Demo

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

我会做这样的事情

＆＃13;

$(document).ready(function() {
  $(".file button").click(function() {
    $(this).prev().toggle(1000);
  });
});

＆＃13;

<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>

＆＃13;

您将使用较少的类名，即file1，file2和x1，x2等。

Answer 5

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

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

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

一旦您的代码离开循环，m可能会发生任何事情，并且在点击时，m无法按预期生效。

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

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

5 个答案: