Question

我有显示产品的jsp文件，产品类是实体，购物车是用js编写的。在jsp我有forEach我添加了一个按钮，但它只适用于其他人不能工作的第一个产品。

我写错了什么？是jsp还是js中的问题？

jsp page

<c:forEach items="${produkt}" var="produkt">
<div class="produkt-container" style=" border: 1px solid #ccc; padding: 5px;
width: 300px; margin: 10px ; display: inline-block;text-align:left;">
<a href="produkt${produkt.id}" >${produkt.model}</a>
<%--<img src="${produkt.images[o]}" alt="">--%>
<c:forEach items="${produkt.images}" var="image">
    <img src="${image}" alt="" style="border: 1px solid black; width: 260px">
</c:forEach>
<button id="buttonAddToCart"  data-art="${produkt.id}" style="margin: 5px; position: relative"> add to cart </button>
</div>

js page

console.log("test");
var cart = {};
$("#buttonAddToCart").click(function () {
    var produktIdForCart = $(this).attr('data-art');
    if (cart[produktIdForCart] != null) {
        cart[produktIdForCart]++;
    }
    else {
        cart[produktIdForCart] = 1;
    }
    console.log(cart);
});

Answer 1

重要提示： - id's每个元素必须是唯一的。所以我会要求您使用class代替{{ 1}}如下所示： -

id

然后更改jQuery代码，如下所示： -

<button class="buttonAddToCart" data-art="${produkt.id}" >

参考： - When is better to use .data() or .attr()?

如果这些按钮 动态创建 < / strong>然后只使用jQuery event-delegation： -

$(".buttonAddToCart").on('click',function(){ var produktIdForCart = $(this).data('art');//prefer to use .data //...rest all code as it is

jQuery $（this）.attr（＆＃39; data-id＆＃39;）

1 个答案: