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

Posted 2023-02-24

【中文标题】Symfony2 在每个循环上更改元素样式

【英文标题】：Symfony2 Change elements style on every loop made

【发布时间】：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"

等等……

【参考方案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 %

希望对你有帮助

罗杰