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

我已经为我的网站创建了一个产品页面。当我单击第一个

addtocart

时，jQuery代码工作得非常好。但是，当第二个

添加到购物车
被单击时，jQuery代码不起作用

这是产品页面的图像：



“alt=”IMG-PRODUCT“>
添加到购物车

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>


$（文档）.ready（函数（）{
$（'add#u cart'）。在（'click'，函数（e）{
e、 预防默认值（）；
var name=$（'#name'）.val（）；
var hiddenID=$（'#hiddenID'）.val（）；
var价格=$（“#价格”）.val（）；
警报（名称）；
警惕（隐藏）；
警报（价格）；
});
});
您的按钮都具有相同的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>

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

$（文档）.ready（函数（）{
$（'.add_cart'）。在（'click'，函数（e）上{
e、 预防默认值（）；
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（名称）；
控制台日志（hiddenID）；
控制台日志（价格）；
});
});


“alt=”IMG-PRODUCT“>
添加到购物车
但是我在while循环下写了这个div？这就是使用类的更多原因。好的，我写的是类而不是Id。但是现在当我单击第二个按钮时，jquery代码工作了，但它会获取第一个，而不是第二个的数据。如果op更改了Id，那么$（“#name”）不会工作此代码可以工作，但现在当我单击第二个按钮时，它会获取第一个按钮的数据，而不是第二个按钮的数据。我仍然会删除增量
id
和丑陋的属性选择器；没有必要。就用普通的class@RoryMcCrossan他明白你的意思。。我看你下面的答案是完美的
<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>

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

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