Question

我的HTML文档中有2个类：links和elements。我想在点击特定链接时切换特定元素我试过这个：

var links = $('.links');
var elements = $('.elements');

for (var i = 0; i < links.length; i++) {
    links.eq(i).click(function() {
        elements.eq(i).toggle();
        return false;
    });
}

Answer 1

这里的问题是循环中的闭包变量。

但我们可以使用index()来解决它，例如

var links = $('.links');
var elements = $('.elements');

links.click(function () {
    elements.eq(links.index(this)).toggle();
    return false;
})

var links = $('.links');
var elements = $('.elements');

links.click(function() {
  elements.eq(links.index(this)).toggle();
  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="links">1</a>
<a class="links">2</a>
<a class="links">3</a>
<a class="links">4</a>
<a class="links">5</a>
<div class="elements">1</div>
<div class="elements">2</div>
<div class="elements">3</div>
<div class="elements">4</div>
<div class="elements">5</div>

JavaScript closure inside loops – simple practical example

Answer 2

另一种方法是使用数据属性来引用相关元素的id。

<div class="container">
    <a class="links" data-element-id="el-1">Links</a>
    <span class="elemennts" id="el-1">Elements</span>
</div>
<script>
$('.container').on("click", ".links", function() {
    $("#" + $(this).data("element-id")).toggle();
}
</script>

在链接的点击上切换相关元素

2 个答案: