ローカルストアのショッピングカート - 商品の削除方法

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リフローの回数を減らすことを目的としています。これは微妙な変更であり、追加される3つの項目の違いに気付かないでしょう。しかし、リストが数千個に増加すると、パフォーマンスが向上します。

.addと.removeitemの両方のclickイベントの委任である2番目の変更。これらのイベントの委譲はより効果的ですが、.removeitem要素でも必要です。これらの要素は、イベントハンドラの作成時に画面に表示されないためです。ここでは委任がなければ、このハンドラーは動作しません。これは、ハンドラーがあなたの質問に取り組んでいないことに気付くと、あなたの問題だと思います。

第3に、.add要素のクリックハンドラを調整して、同じ要素をカートに追加しないようにしました。ユースケースによっては、量を増やして、ユーザーが各アイテムの1つをカートに追加できるようにすることができます。この場合、アイテムが既にユーザーのカートに入っているかどうかを確認し、そうであれば数量値をインクリメントします。そうでない場合はカートにアイテムを追加します。

最後に、.removeitem関数を更新して、ユーザーのカートからアイテムを削除するだけでなく、カートのUIを更新して要素がカートの表示から消えるようにしました。