[英]Using variables for CSS id in a loop with Jade Pug
我想在玉/哈巴狗中建立一个可折叠的div循环。
我正在使用jade npm软件包1.11.0版本
例如,这是我的第一个迭代正在工作:
button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
| Show Response
#response0.collapse
.well
pre=response
不幸的是,当我尝试这个
button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
| Show Response
div(id= 'response0').collapse
.well
pre=session_detail.response
或这个
button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
| Show Response
.collapse(id= 'response0')
#response0.collapse
.well
pre=session_detail.response
html输出看起来不错,但是折叠按钮不起作用。
我想要构建的是这样的东西:
-var i = 0
-session_details.forEach(function(session) {
.row
.col-md-5
pre=session_detail.response
-var dataTarget='#response'+i
-var dataTargetResponse='response'+i
button.btn.btn-primary(type='button', data-toggle='collapse', data-target=#{dataTarget}, aria-expanded='false', aria-controls='collapseExample')
| Show Response
div(id= dataTargetResponse).collapse
.well
pre=session_
-i++
您对我该怎么办有任何想法? 谢谢你的帮助
在pug中使用for循环时,您需要创建一个数组。 或者,您可以使用while之类的东西;
- var i = 0;
.row
.col-md-5
while i < 4
.collapse(id='response' + i)
i++
有关更多信息,请访问pugjs迭代页面
您可以使用Pug的each
循环来遍历数组并处理该数组中的每个项目。
如果您需要在这样的循环中生成内容,而每个循环中的ID都不同,则可以在循环中使用数组的index
,如以下示例所示:
- var sessions = [1, 2, 3, 4, 5];
each session,index in sessions
button.btn.btn-primary(type='button', data-toggle='collapse', data-target= "#response"+index, aria-expanded='false', aria-controls='collapseExample')
| Show Response
.collapse(id= "response"+index)
.well
pre=response
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.