Question

所以我有一个可折叠的CSS页面用于FAQ。使用静态文本，每个工作都很好。但是我没有使用静态文本，而是从数据库中获取问题和答案。

通过普通的CSS，可折叠的FAQ看起来像这样：

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

等...

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>

它使得像“collapse1”这样的ID

Answer 2

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

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

这会生成如下内容：

collapse-1

崩解2

...

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

Answer 3

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

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

我希望它可以帮到你，

罗杰

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

3 个答案: