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

Question

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

目前删除按钮删除一个或多个项目，最后一个项目不会被删除，因为它说 'index' 未定义。

我是 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)
Select 页面上的所有 removeBtn 并添加事件（什么也没找到）
添加第 (1) 行
显示购物车
下一次迭代
构建 TR (2)
Select 页面上的所有 removeBtn 并添加事件（找到 1 个）
添加第 (2) 行
显示购物车
下一次迭代
构建 TR (3)
Select 页面上的所有 removeBtn 并添加事件（找到 1、2）
添加第 (3) 行
显示购物车

所以有 3 行。

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

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

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

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

Set .data() attribute equal to array index

javascript

arrays

jquery

dynamic