设置 .data() 属性等于数组索引

Question

我正在使用 jQuery 动态构建一个表，并且我想在单击该行上的删除按钮时从数组中删除该项目。我目前的方法是将数据 id 设置为等于当前数组索引，然后将该值与 splice() 方法一起使用。

此时删除按钮删除一个或多个项目，最后一个项目不会被删除，因为它表示“索引”未定义。

我是 JavaScripr 和 jQuery 的新手，因此我们将不胜感激任何见解和帮助。

这是我的代码。

$('.shoppingCart').ready(function loadCart() {
// Check to see if cart has items loaded
if (sessionStorage.getItem('cartItemsLoaded' === null)) {
    sessionStorage.setItem("shopCart", JSON.stringify(cart));
    sessionStorage.setItem("cartItemsLoaded", true);
} else {
    // Retrieve array from sessionStorage
    cart = JSON.parse(sessionStorage.getItem("shopCart"));
    cart = cart !=null ? cart : [];

    // Declare iterator
    let cartItems;
    // Loop over array objects with forEach and create <tr> for each object.
    $.each(cart, function (index, value) {
        // Create <tr> element to hold items
        cartItems = $("<tr>" +
            "<td>" + value.prod + "</td>" +
            "<td>R" + value.price + "</td>" +
            "<td>" + "<input type='number' class='form-control border border-dark rounded' id='qntCount' data-name=" + value.prod + " value='" + value.count + "'>" + "<label class='form-label' for='qntCount'>Qnt</label>" + "</td>" +
            "<td>" + "<div class='form-group'>" + "<input type='text' inputmode='numeric' class='form-control-plaintext border border-dark rounded' id='total' data-name=" + value.prod + " value='" + value.count * parseFloat(value.price) + "' disabled>" + "<label class='input-label' for='total'>Total</label>" + "</div>" + "</td>" +
            "<td>" + "<button class='btn btn-outline-danger removeBtn' data-id=' " + index + " '>" + "<i class='bi bi-cart-dash'></i>" + "</button>" + "</td>" +
            "</tr>");

// Used to check value of data-id.
            let i = $('.removeBtn').data('id');
            console.log(i);

        // Add eventListener to removeBtn
        $(".removeBtn").on('click', function removeProd() {
            let i = parseInt($(this).data('id'));
            // Remove object from cart at selected index
            cart.splice(i, 1);
            // Store current cart array
            sessionStorage.setItem("shopCart", JSON.stringify(cart));
            // Reload page
            location.reload();
        });

        $("#shpCart").append(cartItems);
        console.log(i);
        $("#shpCart").show();
    })
}
$(".cartTotal").html(cartTotal());

});

Answer 1

您将事件绑定到每次迭代的所有按钮。在将按钮添加到 DOM 之前绑定事件，因此它不会找到最后一个。

大声朗读您的代码

• 循环开始
• 构建 TR (1)
• 选择页面上的所有removeBtn并添加事件（什么都没找到）
• 添加行 (1)
• 显示购物车
• 下一次迭代
• 构建 TR (2)
• 选择页面上的所有removeBtn并添加事件（找到1个）
• 添加行 (2)
• 显示购物车
• 下一次迭代
• 构建 TR (3)
• 选择页面上的所有removeBtn并添加事件（找到1、2）
• 添加行 (3)
• 显示购物车

所以有 3 行。

• 第一个按钮附加了 2 个点击事件
• 第二个按钮附加了 1 个点击事件
• 第三个按钮附加了 0 个点击事件

您需要在添加所有行之后绑定事件

$.each(cart, function (index, value) {
  // add the rows
});
$(".removeBtn").on('click', function {});