Question

我有一个包含讲座的讲座模型。对于每个讲座，我都有标题和内容，最后还有一些文件。当有人按下标题时，我试图表明，标题和内容将显示在下面，但仅适用于该讲座。问题是，如果我使用一个类，将显示所有讲座，如果我使用和id，将只显示第一个。我该怎么做？

＆＃13;

$('#title').click(function () {
            $('#lecture-hide').toggle();
        });

＆＃13;

 {% for c in category.list %}
                                    <div id="title">
                                        <p>Lecture {{ forloop.counter }}: <span>{{ c.lecture_title }}</span>
                                        </p>
                                        <br>
                                    </div>
                                    <div id="lecture-hide" style="display: none;">
                                        <br>
                                        <li><h5>{{ c.lecture_title }}</h5></li>
                                        <li><p>{{ c.content }}</p></li>
                                        {% for file in c.files.all %}
                                            {% if file.files %}
                                                {% if forloop.first %}
                                                    <p id="files">Lecture files:</p>
                                                {% endif %}
                                                <li><a class="media"
                                                       href='{{ MEDIA_URL }}{{ file.files.url }}'><i
                                                        class="fas fa-download"></i>{{ file.files.name }}</a></li>
                                            {% endif %}
                                        {% endfor %}
                                        <br>
                                    </div>
                                {% endfor %}

＆＃13;

Answer 1

也许您可以在jQuery代码中使用next选择器，如下所示：

$('div.title').click(function () {
    $(this).next().toggle();
});

您必须将标题的ID更改为class才能将其应用于列表的每个元素。

Answer 2

您需要在html中设置动态属性：

{% for c in category.list %}
    <div class="title" id="title-{{ c.id }}">
        <!-- the content -->
    </div>

    <div class="lecture-hide" for="title-{{ c.id }}" style="display: none;">
        <!-- the content -->
    </div>
{% endfor %}

和JQuery

$('.title').click(function () {
    $('.lecture-hide[for="title-' + $(this).attr('id') + '"]').toggle();
});

即使html元素顺序发生变化，这也会有效。

如何隐藏或显示每次迭代的内容？

2 个答案: