[英]Create accordion IDs by looping an array in Jade/Pug
我有一个对象数组(组件),每个对象都有2个属性id和message。 我想为每个对象创建手风琴,如下所示:
.alert.alert-danger(style='background-color: #ff8080; color:white; width:70%')
#headingOne.panel-heading(role='tab', style='text-align: left')
h4.panel-title
a(role='button', data-toggle='collapse', data-parent='#accordion', href='#collapseOne', aria-expanded='true', aria-controls='collapseOne')
i.more-less.glyphicon.glyphicon-plus
| Title
#collapseOne.panel-collapse.collapse(role='tabpanel', aria-labelledby='headingOne')
.panel-body Content
每个手风琴的id是动态的,并且是从我要迭代的对象设置的。 我已验证对象数组具有有效元素,但无法获取要动态生成的ID。 任何帮助表示赞赏。
我到了这个版本,但仍然无法正常工作。 我在NodeJS服务器上得到的只是-内部错误
#accordion.panel-group(role='tablist', aria-multiselectable='true', align='center')
each item in [1,2,3]
.alert.alert-danger(style='background-color: #ff8080; color:white; width:70%')
#headingOne.panel-heading(role='tab', style='text-align: left')
h4.panel-title
a(role='button', data-toggle='collapse', data-parent='#accordion', href='#collapse#{item}', aria-expanded='true', aria-controls='collapse#{item}')
i.more-less.glyphicon.glyphicon-plus
| Title
div(id="collapse#{item}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne")
div(class="panel-body")
!{item}
href='#collapse#{item}'
字符串中的变量不再呈现
如果您使用的是Pug 2.0。 只需按照以下方式更改代码
href='#collapse'+item
希望它对您有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.