Question

我正在创建一个基于jQuery的简单购物车。

到目前为止一切正常。

但是，我现在需要允许用户删除他们添加到购物篮中的商品。

我可以删除该项目并且它可以正常工作但它只能工作 ONCE 然后它会开始表现奇怪而且没有意义！

为了解释这一点，我创造了这个缩小的FIDDLE：

如果您打开上面的链接并单击任何“绿色按钮”，则应删除该元素，如果您在此之后尝试删除任何其他元素，则应该会看到该问题。

删除代码是：

//////// We try to delete the element here if its clicked on//////
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////

$(document).on('click','.cart-del',function(e){



    $('.cart-del').remove();

    var timeAttr = $(this).attr('data-time');

    alert(timeAttr);

    var result = parsedObject.filter(function(x){return x.timeStamp !== timeAttr; });



    var setLoc = JSON.stringify(result);
    localStorage.setItem('product', setLoc);


    var retrievedObject2 = localStorage.getItem('product');



    var parsedObject2 = JSON.parse(retrievedObject2);


            $.each(parsedObject2, function(pi,item){ 

                var products = '<div class="cart-del" id="'+item.id+'" data-price="'+item.price+'" data-details="'+item.details+'" data-time="'+item.timeStamp+'" id="1" data-price="20">'+
'<p>Delete "'+item.id+'"</p>'+
'</div>';



               $(".endDiv").before(products);


});

    });

///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

有人可以帮我解决这个问题吗？

提前致谢。

Answer 1

每次点击都必须从localStorage获取数组。

$(document).on('click','.cart-del',function(e){
    var retrievedObject = localStorage.getItem('product');
    var parsedObject = JSON.parse(retrievedObject);

    $('.cart-del').remove();
    .
    .
    .
}

在你的小提琴中，parsedCode超出了click事件的范围并包含3个元素，并且你继续过滤该数组中的项目，这样就会导致＆＃34;奇怪的＆＃34;行为。

jQuery：从存储在localstorage中的JSON数组中删除对象？

1 个答案: