javascript - PHP 循环 Javascript 只显示第一条记录

Question

我有一个查看代码:

 <?php
      $i = 1;
      //var_dump($this->productList);
      foreach ($this->productList as $data) {
         $desc=explode(",",$data['descriptions']);
      ?>
         <tr>
             <th colspan="3">
                  <input type="hidden" id="id_pack" name="id_pack" value="<?php echo $data['package_id']; ?>">
                  <input type="hidden" id="nama_pack" name="nama_pack" value="<?php echo $data['package_name']; ?>">
                  <h4 align="center" class="title-pack"><?php echo $data['package_name']; ?></h4>
             </th>
        </tr>
        <tr id="dashe">
             <td>
                 <ul class="myul">
                 <?php foreach($desc as $descriptions) { ?>
                     <li class="myli"> <?php echo $descriptions; ?></li>
                 <?php } ?>
                 </ul>
             </td>
             <td>
                <h4 class="prize">
                Rp. <?php echo number_format($data['price'],2);?>
                 / month
                </h4>
            </td>
            <td>
               <p id="order" name="order" class="mybutton" data-toggle="modal" data-target=".mymodal">Order</p>
            </td>
      </tr>
<?php
   $i++;
   }
?>

这是 JavaScript:

 document.getElementById("order").addEventListener("click", tampilkanHrm);
    function tampilkanHrm() {
        var pilihan=$("#nama_pack").val();
        document.getElementById("choice").innerHTML = pilihan;
        document.getElementById("pack").value = pilihan+" Package";
    }

问题是，在订单按钮中它总是显示相同的记录。即使我点击了其他订单按钮，也只显示第一个数据。希望有人帮忙。

Answer 1

您不能为多个元素分配相同的 id。

所以，有不同的 ID。

<?php
      $i = 1;
      //var_dump($this->productList);
      foreach ($this->productList as $data) {
         $desc=explode(",",$data['descriptions']);
      ?>
         <tr>
             <th colspan="3">
                  <input type="hidden" id="id_pack<?php echo $i ?>" name="id_pack" value="<?php echo $data['package_id']; ?>">
                  <input type="hidden" id="nama_pack<?php echo $i ?>" name="nama_pack" value="<?php echo $data['package_name']; ?>">
                  <h4 align="center" class="title-pack"><?php echo $data['package_name']; ?></h4>
             </th>
        </tr>

类似地创建具有不同 id 的按钮。

<td>
    <p id="<?php echo $i ?>" name="order" class="mybutton" data-toggle="modal" data-target=".mymodal">Order</p>
 </td>

然后将您的 javascript 更改为 jquery。希望您也可能使用 jquery [从您的代码中理解]

$(".mybutton").on("click", function() {
   var identifier = $(this).attr("id");
   var pilihan=$("#nama_pack"+identifier).val();
   $("#choice").html(pilihan);
});

像这样更改您的代码并检查。