如何对循环内的按钮使用相同的功能？

Question

我有一个主页，其中显示了数据库中的产品，我放置了一个添加到购物车按钮，该按钮当然会将每个特定产品添加到购物车中。目前我在页面上显示了 6 个产品，但显然只有第一个产品可以添加到购物车中，其余的有一个不起作用的按钮。

经过研究，建议我们不能通过 JavaScript 多次使用同一个 id（我使用的是 id="add-to-cart"），这就是循环内部发生的情况，因此只有第一个项目有一个工作按钮.

如何为我的 while 循环中的每个添加到购物车按钮生成特定 ID，脚本如何识别或读取每个特定 ID？我不是 JavaScript 专家。

                $result = mysqli_query($bd,$sql2);

            }

            if($result){                
            while($row=mysqli_fetch_array($result)){
            $prodID = $row["ID"];

            $prodname= $row["itemname"];
            $prodprice = $row["price"];

            ?>  

                        <h1 class="product"><?php echo $prodname; ?></h1>
                            <p>Price: <span class="price"><?php echo $prodprice; ?></span></p>
                            <br>
                            <a class="btn btn-default add-to-cart cartButtons" id="add-to-cart" input>Add to Cart</a>
                            <p class="info hidethis" style="color:red;"><strong>Item Added to Cart!</strong></p>

这是脚本：

$('#add-to-cart').on('click',function(){
    $(this).siblings('.info').fadeIn(700).fadeOut(1000);
    var price = $(this).siblings('p').children('.price').html();
    var product = $(this).siblings('.product').html();
    $.post('cart/data.php?q=addtocart',
           {
                price:price,
                product:product,
                qty:1
           }
    );
});

Answer 1

根据您的示例，删除您的 id="add-to-cart"，然后像这样调整 jquery 点击：

$('.add-to-cart').on('click',function(){ ... });

这将为所有设置为add-to-cart 类的按钮提供单击事件。由于您已经在点击事件函数中使用了$(this)，因此它已经从该点击而不是其他点击中提取了详细信息。