使用jQuery

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>

Answer 2

快速解决方案是设置var以了解js是否已经注入{% set jsHasBeenInjected = false %}

并将其包含在条件{% if all.category == cat.id and jsHasBeenInjected == false %}{% set jsHasBeenInjected = true %}

中