Question

我制作了购物车。我正在使用localstorage。但我有删除产品的问题，有什么不好？

function showElems(){
    $(".cart1").html("<ul class='cartx'></ul>")
    for (var i = 0; i < localStorage.length; i++)   {
        $(".cartx").append("<li class='" +localStorage.key(i) + "' '>" + localStorage.key(i) + "x" + localStorage.getItem(localStorage.key(i)) + 
            "<button class='removeitem' data-remove='" + localStorage.key(i) + "'>REMOVE</button></li>");
    };
};

showElems();

$(".add").click(function(){
    var product = $(this).attr("data-name");
    localStorage.setItem( product, 1 ); // dodanie jednej sztuki do koszyka
    showElems();
});

/* NOT WORKING */

$(".removeitem").click(function(){
    var productremove = $(this).attr("data-remove");
    localStorage['kubek'] = null;
});

http://codepen.io/dominikx96/pen/rLgjrA

Answer 1

购物车的某些部分需要稍微调整一下。但最终，你走在了正确的轨道上。

我已经清理了一些代码并将结果与jsfiddle.net上的实时工作示例一起发布在下面。下面的代码示例解释了这些更改：

<!-- CART -->
<section id="cart">
  <div class="container">
    <div class="cart1"></div>
  </div>
</section>
<!-- CATEGORY -->
<section id="koszulki" class="category">
    <div class="container">
        <h1 class="category-title">KOSZULKI</h1>
        <div class="category-content">
            <div class="category-item">
                <button class="add" data-name="piersiowka">Dodaj do koszyka</button>
                <button class="more">Zobacz opis</button>
            </div>
            <div class="category-item">
                <button class="add" data-name="szalik">Dodaj do koszyka</button>
                <button class="more">Zobacz opis</button>
            </div>
            <div class="category-item">
                <button class="add" data-name="kubek">Dodaj do koszyka</button>
                <button class="more">Zobacz opis</button>         
            </div>
        </div>
    </div>
</section>

function showElems() {
    var $ul = $('<ul />', { "class": "cartx" });
      for (var a = 0, len = localStorage.length; a < len; a++)   {
        var $li = $('<li />', { "class": localStorage.key(a), text: localStorage.key(a) + "x" + localStorage.getItem(localStorage.key(a)) });
        $('<button />', { "class": "removeitem", data: { remove: localStorage.key(a) }, text: "REMOVE" })
          .appendTo($li);
        $li.appendTo($ul);
      }
    $ul.appendTo($('.cart1').empty());
};

showElems();

$("#koszulki").on('click', '.add', function() {
    if(!localStorage.getItem($(this).data('name'))) {
          localStorage.setItem($(this).data('name'), 1 );
          showElems();
    }
});

$("#cart").on('click', '.removeitem', function() {
    localStorage.removeItem($(this).data('remove'));
    showElems();
});

DEMO： https://jsfiddle.net/5jmmzgkh/2/

第一个更改是在showElems()函数中。现在正在内存中创建无序列表，然后将其附加到.cart1元素。此更改旨在通过阻止浏览器在追加每个列表元素后重新绘制UI来减少发生的CSS重排次数。这是一个微妙的变化，你不会注意到附加的三个项目的差异。但是，如果列表增长到几千个项目，性能提升将会变得明显。

第二个更改是click和.add的{{1}}个事件的委派。这些事件的委派不仅更具性能，而且.removeitem元素也需要它，因为创建事件处理程序时这些元素不在屏幕上。如果没有这里的委托，这个处理程序将不起作用，这就是我猜你的问题，因为你注意到该处理程序在你的问题中不起作用。

第三，我调整了.removeitem元素的点击处理程序，以防止向购物车添加相同的元素。根据您的使用情况，您可能希望增加数量而不允许用户将每个项目中的一个添加到购物车。在这种情况下，您想要查看该商品是否已经在用户的购物车中，如果是，请增加数量值，或者如果没有将商品添加到购物车中。

最后，我更新了.add功能，不仅要从用户购物车中删除该项目，还要更新购物车用户界面，以便元素从购物车显示屏上消失。

购物车与localstorage - 如何删除产品

1 个答案: