我正在使用 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());
});
uj5u.com熱心網友回復：
您在每次迭代時將事件系結到所有按鈕。在將按鈕添加到 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 {});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360020.html
標籤：javascript 查询 数组 动态的