Question

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

<?php

var_dump($argv); //['myphp.php', 'test', 'test2']
echo "Value1: ".$argv[1];
echo "Value2: ".$argv[2];

?>

我遇到的问题主要在于：

$(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>×</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>

出于某种原因，他们停留在来自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>`);


              })
               })

foreach循环似乎没有正确循环

1 个答案: