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) 块。但此时此刻我的 phpstorm 说“i”是可变变量....提前致谢

Answer 1

您在这里有一个关闭问题，以避免它只是i作为数据传递给事件处理程序。

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

Answer 2

我认为您可以执行以下操作：

为每个添加一个类“targetLink”：

<a id="link1" class="targetLink" href="#">LINK1</a>

替换针对类本身的 for 循环：

$("a.targetLink").toggle(function() {
    $(this).next("div").slideDown(350);
}, function() {
    $(this).next("div").slideUp(350);
});

小提琴：http: //jsfiddle.net/VinnyFonseca/yxpCA/

编辑：单击另一个项目时关闭先前打开的 div 的额外功能。

$("a.targetLink").toggle(function() {
    $(".open").slideUp(350);
    $(this).next("div").slideDown(350).addClass("open");
}, function() {
    $(this).next("div").slideUp(350).removeClass("open");
});

Answer 3

首先编辑 href 属性以引用相应的 Dom 元素和一些类来识别锚点。

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

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

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

然后修改javascript

$('.some-class').click(function() {
    $( $(this).attr('href') ).toggle('fast');
});