顯示使用循環生成的列表中的摺疊僅適用於第一個列表項目

Question

我正在做一個項目，從JSON文件收集數據並在我的網頁上顯示一些數據。我從JSON文件獲取信息，並使用列表標記上的循環顯示網頁上的數據。列表標籤基本上有一個摺疊按鈕和顯示信息的div。我已經能夠正確地獲取我的數據，所以這不是問題。問題是當我點擊顯示信息的列表中的數據切換按鈕時，它們全部僅顯示顯示第一個列表項目的摺疊。對於如何解決這個問題，有任何的建議嗎？

這裏是我的代碼：

<ul id="talk-display"> 
    {{#each model as |board|}} 
    <li> 
     <button data-toggle="collapse" data-target="#talk-answer" class="btn" id="talk-question"> 
      <span class="glyphicon glyphicon-menu-down" style="float:left"></span> 
      {{board.question}} 
      <br> 
      <span id="talk-name">By {{board.name}}</span> 
     </button> 

     <div id="talk-answer" class="collapse"> 
      <button class="btn" id="talk-reply">Reply</button> 
      <p id="talk-response">{{board.response}}</p> 
     </div> 
    </li> 
    {{/each}} 
</ul> 

Answer 1

你的問題是，在htmlid小號應該是唯一的。但是，您可以在循環中多次重複使用idtalk-name，因此會中斷。

假設你有你的董事會的獨特id一個簡單的解決可能是這樣的：

<ul id="talk-display"> 
    {{#each model as |board|}} 
    <li> 
     <button data-toggle="collapse" data-target={{concat "#talk-answer" board.id}} class="btn" id={{concat "talk-question" board.id}}> 
      <span class="glyphicon glyphicon-menu-down" style="float:left"></span> 
      {{board.question}} 
      <br> 
      <span id={{concat "talk-name" board.id}}>By {{board.name}}</span> 
     </button> 

     <div id={{concat "talk-answer" board.id}} class="collapse"> 
      <button class="btn" id={{concat "talk-reply" board.id}}>Reply</button> 
      <p id={{concat "talk-response" board.id}}>{{board.response}}</p> 
     </div> 
    </li> 
    {{/each}} 
</ul> 

但是由於您使用的餘燼我強烈建議您不使用JavaScript的引導此功能，但用燼來實現它。