javascript - 具有可变变量的 for() 循环

Question

HTML:

<a id="link1" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>

<a id="link2" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>

<a id="link3" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>

JS:

for (var i = 0; i <= 500; i++) {
  $('#link' + i).click(function() {
    $('#text' + i).toggle('fast');
    return false;
  });
}

但它不起作用。想法是让每个 #link(number) 显示适当的 #text(number) block 。但此时我的 phpstorm 说“i”是可变变量....提前致谢

Answer 1

您有一个closure issue在这里，为了避免这种情况，只需将 i 作为数据传递给事件处理程序。

for (var i = 0; i <= 500; i++) {
  $('#link' + i).click(i, function(e) {
    $('#text' + e.data).toggle('fast');
    return false;
  });
}