javascript - 使用 jQuery 更改 twig foreach 循环中的类

Question

我有一些代码，基本上需要通过一些类别进行交互，然后在各自的类别中显示元素，代码工作正常，但是在我向逻辑添加条件 if 语句后，它破坏了 jQuery，并且只有第一个元素被隐藏而不是本节中的两个。

代码:

{% for cat in categories %}
<div class="panel-heading panel-collapse-trigger" id="category-{{ cat.id }}" style="background: #f5f5f5;border-color: #ffffff;">
    <h4 class="panel-title" style="text-transform: uppercase;" onMouseOver="this.style.color='#0c80df'" onMouseOut="this.style.color=''">
        <a class="link-text-color"><b>{{ cat.name }}</b></a>
    </h4>
</div>

{% for all in articles %}

    {% if all.category == cat.id %}
    <script>
        // show & hide categories
        $("#category-{{ cat.id }}").click(function() {
            if($(this).attr('class') == 'panel-heading panel-collapse-trigger collapsed') {

                // open category
                $(this).attr('class','panel-heading panel-collapse-trigger');
                $("#{{ all.slug }}").slideDown();

            }else{
                // hide category (only closes one of the items in the category, due to foreach loop?)
                $(this).attr('class','panel-heading panel-collapse-trigger collapsed');
                //alert("{{ all.title }}");
                $("#{{ all.slug }}").slideUp();
            }
        });
    </script>

输出:

            <div class="panel-heading panel-collapse-trigger" id="category-1" style="background: #f5f5f5;border-color: #ffffff;">
<h4 class="panel-title" style="text-transform: uppercase;" onMouseOver="this.style.color='#0c80df'" onMouseOut="this.style.color=''">
    <a class="link-text-color"><b>Annoucements</b></a>
</h4>

您可以在这里看到整个脚本正在重复，可能是问题所在？

                                    <script>
    // hide categories
    $("#category-1").click(function() {
        if($(this).attr('class') == 'panel-heading panel-collapse-trigger collapsed') {

            // open category
            $(this).attr('class','panel-heading panel-collapse-trigger');
            $("#welcome").slideDown();

        }else{
            // hide category (only closes one of the items in the category, due to foreach loop?)
            $(this).attr('class','panel-heading panel-collapse-trigger collapsed');
            //alert("Welcome");
            $("#welcome").slideUp();
        }
    });
</script>

<li class="list-group-item" id="welcome"><a class="link-text-color" href="/article/welcome">Welcome&nbsp;&raquo;</a></li>

                                    <script>
    // hide categories
    $("#category-1").click(function() {
        if($(this).attr('class') == 'panel-heading panel-collapse-trigger collapsed') {

            // open category
            $(this).attr('class','panel-heading panel-collapse-trigger');
            $("#recent-updates").slideDown();

        }else{
            // hide category (only closes one of the items in the category, due to foreach loop?)
            $(this).attr('class','panel-heading panel-collapse-trigger collapsed');
            //alert("Updates");
            $("#recent-updates").slideUp();
        }
    });
</script>

更新:(JavaScript 类别点击功能的重复次数与该特定类别中的元素数量相同)

示例:

<script>
// hide categories
$("#category-1").click(function() {
$(this).prop('class','panel-heading panel-collapse-trigger collapsed');
$("#welcome").slideUp();
});
</script>

<script>
// hide categories
$("#category-1").click(function() {
$(this).prop('class','panel-heading panel-collapse-trigger collapsed');
$("#recent-updates").slideUp();
});
</script>

而不是:

<script>
// hide categories
$("#category-1").click(function() {
$(this).prop('class','panel-heading panel-collapse-trigger collapsed');
$("#welcome").slideUp();
$("#recent-updates").slideUp();
});
</script>

Answer 1

为了澄清我的评论，这里有一个代码示例:

{% for category in categories %}
    <div class="collapsable-trigger" data-category-id="{{ category.getId() }}">
        <h1>{{ category.getName() }}</h1>
    </div>
{% endfor %}

{% for article in articles %}
<article data-category-id="{{ article.getCategoryId() }}">
    <h1>{{ article.getTitle() }}</h1>
    {{ article.getContent() | raw }}
</article>
{% endfor %}

<script>
$(function() {
    $('.collapsable-trigger').on('click', function() {
        $('article[data-category-id="'+$(this).data('category-id')+'"]').toggle();
    });
});
</script>