我一直在努力解决这个可能非常简单的问题。
我有动态生成的链接,例如 #l1、#l2.. 并且对于每个链接,我都有一个包含图像 img 的链接。 div 具有与链接对应的 ID,例如 #li1,当单击时,应切换 ID 为 #di1 的 div,依此类推。
我编写了一个测试,在其中循环访问 ID 号并构建 jquery 按钮监听器。内容如下:
a = [1,2,3,4]; // those are link and div IDs
for (k=0;k<3;k++){
$("#"+"li"+a[k]).click(function() {
$("#"+"di"+a[k]).toggle();
});
}
但这给我的是所有链接上的监听器,它只切换最后一个 div!
再说一次:我在标签中有链接,单击该链接时,应该会切换到具有相应 ID 的不同 div。
我在这里做错了什么?
谢谢..
最佳答案
到时候 click
被调用,值为 k
是3
(因为 k++
),只需使用 this
上下文。
确保for-loop
应该有 k < 4
迭代条件 4(0, 1, 2, 3)
元素。
var a = [1, 2, 3, 4];
for (k = 0; k < 4; k++) {
$("#li" + a[k]).click(function() {
$(this).toggle();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="li1">li1</div>
<div id="li2">li2</div>
<div id="li3">li3</div>
<div id="li4">li4</div>
采用您的方法:
Use
closure
, inner function remembers the environment in which it is created!
var a = [1, 2, 3, 4];
for (k = 0; k < 4; k++) {
$("#di" + a[k]).click((function(k) {
return function() {
$("#li" + a[k]).toggle();
}
})(k));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="di1">Div 1</div>
<div id="di2">Div 2</div>
<div id="di3">Div 3</div>
<div id="di4">Div 4</div>
<hr>
<hr>
<div id="li1">Links 1</div>
<div id="li2">Links 2</div>
<div id="li3">Links 3</div>
<div id="li4">Links 4</div>
关于javascript - jQuery 启动许多按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38890336/