foreach循环似乎未正确循环

Question

使用jquery，我创建了这个foreach循环，将ajax显示在html / bootstrap中：

$(document).ready(() => {



         let $newList = $(".listDeals");

          $.getJSON('data/search.json', (deal) => {

              console.log(deal)
              $.each(deal, (i) => {

            $newList.append(`<li><a role=button data-toggle=modal data-target=#myModal href=#>${deal[i].Name} <i class="fa fa-gamepad fa-lg" aria-hidden="true"></i></a></li>
            <div class="modal fade" id=myModal>
  <div class=modal-dialog>
    <div class=modal-content>


      <div class=modal-header>
        <h4 class="modal-title">${deal[i].Name}</h4>
        <button type=button class=close data-dismiss=modal>&times;</button>
      </div>

      <div class="modal-body">
        ${deal[i].deals}
      </div>

      <div class=modal-footer>
        <button type=button class=btn btn-secondary data-dismiss=modal>Close</button>
      </div>

      </div>
      </div>
      </div>`);


              })
               })

我遇到的问题主要是在线上：

• <h4 class="modal-title">${deal[i].Name}</h4>和

• <div class="modal-body">${deal[i].deals}</div>

由于某些原因，它们停留在来自ajax / JSON文件的第一项上。 我不确定如何循环其他位。 但是，其余代码也可以。

有什么建议么？

Answer 1

问题出在您的模态ID上。 所有生成的模态都具有相同的ID，即myModal。 这就是为什么所有对该模式的调用总是调用第一个模式的原因。 您需要使ID动态化。 参见下面的代码：

 $(document).ready(() => { let $newList = $(".listDeals"); var x = 0; $.getJSON('data/search.json', (deal) => { console.log(deal) $.each(deal, (i) => { x++; $newList.append(`<li><a role=button data-toggle=modal data-target=#myModal`+x+` href=#>${deal[i].Name} <i class="fa fa-gamepad fa-lg" aria-hidden="true"></i></a></li> <div class="modal fade" id="myModal`+x+`"> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <h4 class="modal-title">${deal[i].Name}</h4> <button type=button class=close data-dismiss=modal>&times;</button> </div> <div class="modal-body"> ${deal[i].deals} </div> <div class=modal-footer> <button type=button class=btn btn-secondary data-dismiss=modal>Close</button> </div> </div> </div> </div>`); }) })