如何在 for 循环中添加 jQuery 显示/隐藏功能？

Question

我想向我的网站添加一个 jQuery 显示/隐藏 功能。 usual 显示/隐藏功能有效，但我的功能比通常的要复杂一些。

“隐藏 div”和我想在点击时隐藏/显示的 div 位于 for 循环内，并且有大量具有此名称的 div。我可以（以编程方式）为每个 div 添加特定的 id，但我无法以编程方式在 JavaScript 中添加此名称：我必须手动添加它们。

这是我要添加功能的一段代码：

{% for facet in facets %}
    <div class="block-title"> {{ facet.name }} <div id="hide">HIDE</div></div>
        <ul class="term-list">
            {% for stat in stats %}
                <li class="term-item>{{ stat.name }}</li>
            {% endfor %}
        </ul>
{% endfor %}

这是显示/隐藏功能：

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $(".term-list").hide();
    });
    $("#show").click(function(){
        $(".term-list").show();
    });
});
</script> 

当我点击隐藏按钮时，它会按预期隐藏每个.term-list div。

我尝试了两种方法都没有成功：

1. 我在#hide 和.term-list div 中添加了一个数字（带有forloop），它变成了：#hide1 和.term-list1，#hide2 和.term-list2，...但是我无法添加对 JavaScript 代码进行 for 循环。
2. 当点击#hide 时，我尝试仅隐藏以下（下一个）.term-list div，但next() 和nextAll() functions 不起作用。

那么，我应该怎么做才能在这个 for 循环中添加 jQuery 显示/隐藏函数？

Answer 1

您不能在页面中重复 ID，它们根据定义是唯一的。改用类

然后使用遍历来定位关联列表

$(".hide").click(function(){
    // "this" is element event occurred on
    $(this).closest('.block-title').next().hide();
});

Answer 2

只需使用$(this) jQuery 对象来选择要 hide 或 show 的元素（并且您必须将 id 属性 hide 更改为 class 因为您应该只有一个网页上有一个 id 的元素）。

将id属性更改为class后：

var elTerms = null;
$('.hide').click(function(){
  elTerms = $(this).closest('div').find('ul.term-list');
  if (elTerms.is(':visible')) {
    elTerms.hide();
  } else {
    elTerms.show();
  };
});