使用 jQuery 在树枝 foreach 循环中更改类答案

【问题标题】：Changing class within a twig foreach loop using jQuery使用 jQuery 在树枝 foreach 循环中更改类
【发布时间】：2016-07-27 01:25:40
【问题描述】：

我有一些代码基本上需要通过某些类别进行交互，然后在它们各自的类别中显示项目，代码工作正常但是在我向逻辑中添加条件 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>

【问题讨论】：

你不需要重复 javascript。重写 javascript，使其针对正确的项目..
我不明白你的意思？在 $("#category-1").click(function() 中，它确实通过输出 "$("#recent-updates").slideDown();" 来定位正确的项目，但是，我认为由于循环它缺少此部分的其他项目，因此未显示。对于一个部分中的每个项目，javascript 类别单击功能正在重复，请参阅更新。
另外，请确保您的 HTML btw 中只有唯一 ID

标签： javascript php jquery css twig

【解决方案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>

【讨论】：

【解决方案2】：

一个快速的解决方案是设置一个var来知道js是否已经被注入{% set jsHasBeenInjected = false %}

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

中

【讨论】：