Question

概述：基于前端的愿望清单

技术： HTML5（localStorage），CSS和jQuery

功能：添加项目，重新加载前删除项目，实时计数

问题：如果我添加产品，重新加载并尝试将其从阵列中删除它将无法正常工作。

代码，我不知道如何解决问题：

$("#wish_list_item").on("click", ".w-premove", function() {
$product_id = $(this).attr("wpid");
$("#list_id_" + $product_id).remove();
wish_list = $.grep(wish_list, function(n, i) {
  return n != $product_id;
});
localStorage.setItem(wishlistkey, JSON.stringify(wish_list));
show_message("Product removed");
count_items_in_wishlist_update();
});
});

链接到我的小提琴： https://jsfiddle.net/3ybwf3c3/4/

解决方案： https://jsfiddle.net/3ybwf3c3/6/

代码：

$("tr.wishlist-item").each(function(index, el) { wish_list.push(el.outerHTML); });

Answer 1

问题在于：

wish_list = $.grep(wish_list, function (n, i) {
    return n != $product_id;
});

n包含整个tr元素的HTML字符串，但$product_id只是一个字符串ID。所以一切都匹配，然后将所有行放回本地存储。

由于您从DOM中删除了产品，因此您只需重新查询DOM以获取新的HTML字符串：

wish_list = [];

$("tr.wishlist-item").each(function(index, el) { 
    wish_list.push(el.outerHTML);
});

使用jQuery从本地存储中的数组中删除Item

1 个答案: