Question

我想在我的网站上添加一个jQuery show / hide 功能。 usual显示/隐藏功能可以正常工作，但我的功能比通常的要复杂一些。

＆＃34;隐藏div＆＃34;我想隐藏/显示点击的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。

我尝试了两种方法，但无法取得成功：

我在#hide和.term-list div（包含forloop）中添加了一个数字，它变为：#hide1和.term-list1，#hide2和{{1} }，但是我无法为JavaScript代码添加一个for循环。
我点击.term-list2时只尝试隐藏以下（下一个）.term-list div，但#hide和next() functions无法正常工作

所以，我应该怎么做才能在这个for循环中添加jQuery show / hide函数？

Answer 1

您无法在页面中重复ID，根据定义它们是唯一的。而是使用类

然后使用遍历来查找关联列表

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

Answer 2

只需使用$(this) jQuery对象选择要素隐藏或显示（并且您必须将ID属性hide更改为类，因为您应该只有一个元素在网页上有一个id）。

更改后的ID归属于课程：

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

如何在forloop中添加jQuery show / hide功能？

2 个答案: