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每个循环改变元素样式

回答

相关问题