php - 单击第二个“添加到购物车”按钮时，jQuery代码不起作用

我已经为我的网站创建了一个产品页面。当我单击第一个Add to Cart时，jQuery代码可以完美运行。但是当单击第二个Add to Cart时，jQuery代码不起作用。

这是产品页面的图像：

enter image description here

<?php
   $query = 'SELECT * FROM `products` order by product_id DESC';
   $result = mysqli_query($conn,$query);
   while ($row = mysqli_fetch_array($result)) {?>
<div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
   <!-- Block2 -->
   <div class="block2" id="image">
      <div class="block2-img wrap-pic-w of-hidden pos-relative block2-label">
         <img src="<?php echo $base_url .'pages/Ajax/'.$row['product_img1']; ?>" alt="IMG-PRODUCT">
         <div class="block2-overlay trans-0-4">
            <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
            <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
            <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
            </a>
            <div class="block2-btn-addcart w-size1 trans-0-4">
               <!-- Button -->
               <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" id="add_cart">
               Add to Cart
               </button>
            </div>
         </div>
      </div>
      <input type="text" value="<?=$row['product_id'];?>" name="hiddenID" id="hiddenID">
      <input type="text" value="<?=$row['product_title'];?>" name="name" id="name"><input type="text" value="<?=$row['product_price'];?>" name="price" id="price">
      <div class="block2-txt p-t-20">
         <a href="product-detail.php?id=<?=$row['product_id'];?>" class="block2-name dis-block s-text3 p-b-5">
         <?php echo $row['product_title']; ?>
         </a>
         <span class="block2-price m-text6 p-r-5">
         $<?php echo $row['product_price']; ?>
         </span>
      </div>
   </div>
</div>
<?php } ?>

jQuery代码

<script>
$(document).ready(function(){
    $('#add_cart').on('click', function(e){
        e.preventDefault();
        var name = $('#name').val();
        var hiddenID = $('#hiddenID').val();
        var price = $('#price').val();
        alert(name);
        alert(hiddenID);
        alert(price);
});
});
</script>

最佳答案

您的按钮都具有相同的ID。

您需要使用类或使按钮ID动态唯一。

喜欢 ：

<button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" id="add_cart_<?php echo $row['product_id']?>">
Add to Cart
</button>

然后使用jsquery

<script>
$(document).ready(function(){

    $('[id^="add_cart_"]').on('click',function(e) {

         var index = $(this).attr('id').split("_")[1]; //product ID of the clicked button
        e.preventDefault();
        var name = $('#name').val();
        var hiddenID = $('#hiddenID').val();
        var price = $('#price').val();
        alert(name);
        alert(hiddenID);
        alert(price);
});
});
</script>

编辑：

您也可以使用data属性在按钮上添加产品详细信息。

<button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" id="add_cart_<?php echo $row['product_id']?>" data-product="<?php echo $row['product_title']?>" data-price="<?php echo $row['product_price']?>">
Add to Cart
</button>

然后 ：

<script>
$(document).ready(function(){

    $('[id^="add_cart_"]').on('click',function(e) {
         e.preventDefault();
        var hiddenID = $(this).attr('id').split("_")[1]; //product ID of the clicked button

        var name = $(this).data('product');
        var price = $(this).data('price');
        alert(name);
        alert(hiddenID);
        alert(price);
});
});
</script>

关于php - 单击第二个“添加到购物车”按钮时，jQuery代码不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54810220/