Symfony2每個循環改變元素樣式

所以我有一個可摺疊的FAQ頁面。隨着靜態文本everyting工作正常。但是，我沒有使用靜態文本，我正在從數據庫中獲得問題和答案。Symfony2每個循環改變元素樣式

因此，通過正常的CSS可摺疊的常見問題解答如下：

  <div class="accordion" id="accordion2"> 
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
       <h4><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
        Collapsible Group Item #1 
       </a></h4> 
       </div> 
       <div id="collapseOne" class="accordion-body collapse" > 
       <div class="accordion-inner"> 
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. 
        <br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum varius dapibus. Sed hendrerit porta felis at sollicitudin. 
        <br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum varius dapibus. Sed hendrerit porta felis at sollicitudin. 

       </div> 
       </div> 
      </div> 
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
       <h4><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
        Collapsible Group Item #2 
       </a></h4> 
       </div> 
       <div id="collapseTwo" class="accordion-body collapse" > 
       <div class="accordion-inner"> 
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. 
       </div> 
       </div> 
      </div> 
      </div>

隨着我對動作循環，它看起來是這樣的：

  <div class="accordion" id="accordion2"> 
      {% for faq in faqs%} 
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
       <h4><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
        {{faq.question}} 
       </a></h4> 
       </div> 
       <div id="collapseOne" class="accordion-body collapse" > 
       <div class="accordion-inner"> 
        {{ faq.answer }} 
       </div> 
       </div> 
      </div> 
     {% endfor %} 
      </div>

的問題是，循環加載相同的類每次。所以不管我按什麼問題，它總會打開第一個問題。

是否可以在每個循環上以某種方式更改類？例如：

1st loop: id="collapseOne" 
2nd loop: id="collapseTwo"

等等

來源

2015-07-21 Dominykas55

可以使用TWIG Loop variable用於動態生成不同的值爲例：

<div id="collapse-{{ loop.index }}" class="accordion-body collapse" >

這產生類似：

崩潰-1

崩潰-2

...

如果您需要collapseOne，collapseTwo等，您需要翻譯密鑰

來源

2015-07-21 10:42:21 Matteo

您可以使用循環索引（http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable）

{{ loop.index }}

例如：

<div class="accordion" id="accordion2"> 
     {% for faq in faqs%} 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
      <h4><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse{{ loop.index }}"> 
       {{faq.question}} 
      </a></h4> 
      </div> 
      <div id="collapse{{ loop.index }}" class="accordion-body collapse" > 
      <div class="accordion-inner"> 
       {{ faq.answer }} 
      </div> 
      </div> 
     </div> 
    {% endfor %} 
     </div>

這使得像「collapse1」 IDS

來源

2015-07-21 10:41:48

試塗在樹枝用「循環」（樹枝API：cycle）

{% for faq in faqs %} 
     <div id="{{ cycle(['collapse-1', 'collapse-2']" class="accordion-body collapse" > 
    {% endfor %}

我希望它可以幫助你，

羅傑

來源

2015-07-21 11:02:49

Symfony2每個循環改變元素樣式

回答

相關問題