jQuery kullanarak bir twig foreach döngüsünde sınıf değiştirme

Question

Bazı kategoriler aracılığıyla temelde etkileşime girmesi gereken bazı kodlarım var ve ardından ilgili kategorilerdeki öğeleri görüntülüyor, ancak kod mantığa koşullu if ifadesi ekledikten sonra kod çalışıyor jQuery ve sadece ilk öğe bölümdeki iki yerine gizlidir.

Kodu:

{% 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> 

Çıktı: Burada tüm komut yinelenmesine görebilirsiniz

  <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> 

, muhtemelen sorunu?

        <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> 

Güncelleme:

<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> 

yerine:

Örnek (javascript kategori tıklama işlevi bu kategoriye özgü öğelerin sayısı gibi zamanlarda aynı miktarda çoğaltılamaz ediliyor)

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

Answer 1

Yorumumu netleştirmek için, bir kod örneği şöyledir:

{% 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

Hızlı çözüm js zaten {% set jsHasBeenInjected = false %}

enjekte ve bunu dahil olup olmadığını bilmek bir var ayarlamaktır senin şartlı {% if all.category == cat.id and jsHasBeenInjected == false %}{% set jsHasBeenInjected = true %}