ループを使用して生成されたリストから折り畳みを表示する最初のリストでのみ使用する項目

Question

私はJSONファイルからデータを収集し、私のウェブページにその一部を表示するプロジェクトを行っています。私はJSONファイルから情報を取得し、リストタグのループを使用して自分のWebページにデータを表示します。リストタグには、基本的に折り畳みボタンと、情報を表示する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のこのための機能が、 emberと一緒に実装してください。