Symfony2 在每个循环中更改元素样式

Question

所以我有一个可折叠的 CSS 常见问题解答页面。使用静态文本一切正常。但是我没有使用静态文本，而是从数据库中获取问题和答案。

所以通常 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>

在我的 for 循环中，它看起来像这样：

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

问题在于循环每次都加载相同的 classes。所以无论我按什么问题，它都会打开第一个问题。

是否可以在每个循环中以某种方式更改 class？例如：

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

等...

Answer 1

您可以使用循环索引(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>

它使 id 像 "collapse1"

Answer 2

您可以使用 TWIG Loop variable 动态生成不同的值，例如：

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

这会生成如下内容：

崩溃-1

崩溃-2

...

如果您需要 collapseOne 、 collapseTwo 等，您需要翻译密钥

Answer 3

尝试在twig中使用"cycle"（twig API: cycle）

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

希望对你有帮助，

罗杰

Symfony2 在每个循环中更改元素样式

Symfony2 Change elements style on every loop made

css

php

jquery

symfony

twig