如何在forloop中添加jQuery的显示/隐藏函数

How to add jQuery show/hide function inside forloop?

本文关键字：显示 隐藏 函数 jQuery 添加 forloop      更新时间：2023-09-26

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

"hidediv"和我想在点击时隐藏/显示的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-listdiv。

我尝试了两种方法，但都不成功:

  1. 我在#hide和.term-listdiv上添加了一个数字(带forloop)，它变成了:#hide1和.term-list1, #hide2和.term-list2，…但是我不能在JavaScript代码中添加for循环。
  2. 当点击#hide时，我试图隐藏以下(下一个).term-list div，但next()和nextAll()功能不起作用。


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

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

然后使用遍历查找相关列表

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

简单地使用$(this) jQuery对象来选择元素隐藏或显示(你必须改变id属性hide类，因为你应该只有一个元素与一个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();
  };
});
相关文章：