Question

我做了購物車。我正在使用本地存儲。但我有刪除產品的問題，有什麼不好？

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重排的次數。這是一個微妙的變化，你不會注意到追加的三個項目的差異。然而，如果名單增長到幾千個項目，性能增益將變得明顯。

第二個變化是.add和.removeitem兩個click事件的委派。這些事件的委派不僅更具性能，而且還需要與.removeitem元素一起使用，因爲當創建事件處理程序時，這些元素不在屏幕上。如果沒有在這裏委託，這個處理程序不會工作，這是我所猜測的是你的問題，因爲你注意到，該處理程序不在你的問題。

第三，我調整了.add元素的點擊處理程序，以防止將相同元素添加到您的購物車。根據您的使用情況，您可能希望增加數量作爲反對，以便僅允許用戶將每件物品中的一件添加到購物車。在這種情況下，您需要查看該物品是否已經在用戶的購物車中，並且：如果是，請增加數量值，或者如果不將該物品添加到購物車中。

最後，我更新了.removeitem功能，不僅可以從用戶的購物車中刪除商品，還可以更新購物車的用戶界面，以便該元素從購物車顯示中消失。