javascript - 通过django模板中数据属性的数值切换元素

Question

我有一个组名列表，对于每个组名，我都有一个学生名列表。我想在点击组名时显示每个组下的名称列表。

例如。

group 1(#clicked)     
    A 
    B
    C
group 2(#not clicked)
group 3(#clicked)
    F
    E
    R

我有两个模型

1: 组(id,name)2: 学生(id,name,group_id)

HTML:-

{% for group in groups%}
<span class="group-list" data-id="{{group.id}}">{{group.name}}<span class="clickSpan">Click To Expand</span><span class="date">Group created Date:{{group.update_date}}</span></span>
    <div class="child name-list">
    {% for stu in group.students_set.all %}
    <span>{{stu.name}}</span>
{%endfor%}
</div>
{%endfor%}

我想将组 ID 作为属性发送，并使用它来仅显示与组 ID 匹配的那些名称。我的 Html 在每个组下都给我正确的名称。我只想在单击组名称时切换它们。现在它会切换所有组下的所有名称。

编辑:脚本:

nameDisplay = function () {
    $(".clickSpan").click(function () {
        $(".group-list").next('.name-list').toggle()
    });
}

clickSpan 是我针对每个组名称添加的跨度类，它表示“单击以展开”。我怎样才能达到同样的目标呢？另外，如果展开时能在这里得到“点击折叠”就更好了。

Answer 1

在您的标记中，必须切换的 group-list 元素和 name-list 是兄弟元素，因此您可以利用该关系来切换正确的元素。

不需要其他属性来做到这一点。

nameDisplay = function () {
    $(".name-list").hide();
    $(".group-list").click(function () {
        $(this).next('.name-list').toggle()
    });
}

---

此外，最好使用 css 规则设置 name-list 的默认隐藏状态，例如

.name-list {
    display: none;
}

然后使用点击处理程序使其可见

nameDisplay = function () {
    $(".group-list").click(function () {
        $(this).next('.name-list').toggle()
    });
}