Jade PugのループでCSS idの変数を使用する

Question

jade/pugに折りたたみ可能なdivのループを作りたいと思います。

私は例えばヒスイNPMパッケージのバージョン1.11.0

を使用していますが、ここで働いている私の最初の繰り返しである：私はこの1つ

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 
#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 
.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++ 

あなたは私が何ができるかのいずれかのアイデアを持っていますか？ あなたの助けをありがとう

Answer 1

pugでforループを使用する場合は、配列を作成する必要があります。または、あなたはこのような何かを使うことができます。

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

詳しい情報オーバーpugjs iterationページで

Answer 2

あなたは、配列をループに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