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（数字）显示适当的#text（数字）块。但是在这一刻我的phpstorm说“我”是可变变量....提前感谢

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

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

for（）循环使用可变变量

3 个答案: