Question

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

这是产品页面的图像：

<?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>

Answer 1

您的按钮都具有相同的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>

Answer 2

问题是因为您要在循环中重复相同的id属性。它们在DOM中必须是唯一的。要解决此问题，请将其更改为类。然后，您将需要使用DOM遍历来查找与单击的按钮相关的输入。为此，您可以结合使用closest()和find()，如下所示：

$(document).ready(function() {
  $('.add_cart').on('click', function(e) {
    e.preventDefault();
    var $container = $(this).closest('.col-sm-12');

    var name = $container.find('.name').val();
    var hiddenID = $container.find('.hiddenID').val();
    var price = $container.find('.price').val();

    console.log(name);
    console.log(hiddenID);
    console.log(price);
  });
});

<?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">
    <div class="block2 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 class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4 add_cart">Add to Cart</button>
          </div>
        </div>
      </div>
      <input type="text" value="<?=$row['product_id'];?>" name="hiddenID" class="hiddenID">
      <input type="text" value="<?=$row['product_title'];?>" name="name" class="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代码不起作用

2 个答案: