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"
等等
答
可以使用TWIG Loop variable用于动态生成不同的值为例:
<div id="collapse-{{ loop.index }}" class="accordion-body collapse" >
这产生类似:
崩溃-1
崩溃-2
...
如果您需要collapseOne,collapseTwo等,您需要翻译密钥
答
您可以使用循环索引(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
答
试涂在树枝用 “循环”(树枝API:cycle)
{% for faq in faqs %}
<div id="{{ cycle(['collapse-1', 'collapse-2']" class="accordion-body collapse" >
{% endfor %}
我希望它可以帮助你,
罗杰