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

Posted 2023-05-08

【中文标题】如何对循环内的按钮使用相同的功能？

【英文标题】：How to use the same function for a button inside a loop?

【发布时间】：2018-06-01 05:57:56

【问题描述】：

我有一个主页，其中显示了数据库中的产品，我放置了一个添加到购物车按钮，该按钮当然会将每个特定产品添加到购物车中。目前我在页面上显示了 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
           
    );
);

【问题讨论】：

当您不能使用多个相同的 id（因为它们必须是唯一的！）时，将点击事件绑定到 .class 就派上用场了。

【参考方案1】：

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

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

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

【讨论】：

先生，您的解决方案确实有效。所有添加到购物车的按钮现在都适用于每种产品。非常感谢您的帮助！非常感谢