在Jade Pug中使用循環中的CSS id變量

我想在jade/pug中構建一個可摺疊div的循環。在Jade Pug中使用循環中的CSS id變量

我使用的玉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++

你有什麼我可以做任何想法？感謝您的幫助

來源

2017-05-25 Quentin Del

您需要在帕格中使用for循環時創建一個數組。或者你可以使用，像這樣的東西;

- var i = 0; 
.row 
    .col-md-5 
    while i < 4 
     .collapse(id='response' + i) 
     i++

在pugjs iteration頁面

來源

2017-05-26 01:13:25 LWilson

更多信息超過您可以使用each loop of Pug遍歷數組和處理數組中的每個項目。

如果你需要生成與不同的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

來源

2017-05-26 11:42:34

在Jade Pug中使用循環中的CSS id變量

回答

相關問題