Symfony2 在每个循环上更改元素样式答案

【问题标题】：Symfony2 Change elements style on every loop madeSymfony2 在每个循环上更改元素样式
【发布时间】：2015-10-10 18:23:24
【问题描述】：

所以我有一个用于常见问题解答的可折叠 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>

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

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

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

等等……

【问题讨论】：

标签： php jquery css symfony twig

【解决方案1】：

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

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

这会产生类似的东西：

折叠-1

折叠-2

...

如果你需要collapseOne、collapseTwo等，你需要翻译key

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试在树枝中使用“循环”（树枝 API：cycle）

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

希望对你有帮助

罗杰

【讨论】：