カートから商品を正しく取り除くことができません（JavaScript＆Jquery）

Question

基本的に、私は最近（非常に基本的なレベルで）製品のカスタマイズをサポートするためにアップグレードしたカートを持っています。アップグレードには、名前、価格、数量に加えて、特定の自転車の色とマテリアルの種類が含まれています。

問題は、私が追加した新機能はコンボボックスやオプションを使用しているため、以前に追加した組み合わせを削除しようとすると色と素材の組み合わせが少し異なるカートにアイテムを追加するたびに私は最新のものを削除することができます。

私はこれを試して説明するよりも、コードに表示する方が簡単だと思います。 これは、カートオフの項目を削除するための私のロジックです：興味がある人のために

//removing one particular item completely from the cart 
 
AS_shoppingCart.removeItemAll = function(name, color, material){ 
 
    //for every item in the array which has the same name; remove. 
 
    for (var i in this.cartShop) 
 
     if(this.cartShop[i].name === name, this.cartShop[i].color === color, this.cartShop[i].material === material) { 
 
      this.cartShop.splice(i, 1); 
 
      break; 
 
     }; 
 
    AS_shoppingCart.saveLocalCart(); 
 
};

、これは私がアレイ上のオブジェクトのインスタンスを格納する方法である：

//THE LOGIC FOR THE SHOPPING CART - OOP 
 
var AS_shoppingCart = {}; 
 
//cart where the item objects will be stored 
 
AS_shoppingCart.cartShop = []; 
 
//item object and its properties 
 
AS_shoppingCart.Item = function(name, price, quantity, color, material) { 
 
    this.name = name; 
 
    this.price = price; 
 
    this.quantity = quantity; 
 
    this.color = color; 
 
    this.material = material; 
 
};

これは私のHTMLのように見えます。これらのオプションに問題があることに注意してください。古いカートのエントリを削除するには、リストされたアイテムと同じオプションの組み合わせを選択する必要があります。論理的には合理的ですが、問題は、私はこの問題を回避する方法についてはほんの少しの手がかりがありません。

    <div> 
 
        <h4>Customisation:</h4> 
 
        <table> 
 
         <tr> 
 
          <th>Color</th> 
 
          <th>Material</th> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
          <select id="colors" name="colors"> 
 
           <option data-color="Default">Default</option> 
 
           <option data-color="Blue">Blue</option> 
 
           <option data-color="Green">Green</option> 
 
           <option data-color="Brown">Brown</option> 
 
          </select> 
 
          </td> 
 
          <td> 
 
          <select id="materials" name="materials"> 
 
           <option data-material="Alloy">Alloy</option> 
 
           <option data-material="Steel">Steel</option> 
 
           <option data-material="Carbon Fibre">Carbon Fibre</option> 
 
           <option data-material="Titanium">Titanium</option> 
 
           </select> 
 
          </td> 
 
         </tr> 
 
         </table> 
 
        </div> 
 
        <div class="button-group"> 
 
         <button class="add-to-cart" data-name="Aluminum road bike " data-price="256">Add to cart</button> 
 
        </div>

これは、それが使われるようにロジックを置くjQueryの一部です。注意;私はスニペットで無関係な部分を切り抜いた。

$(document).ready(function(){ 
 
    /* CART */ 
 
     //assigning a click event to DOM object 
 
    $(".add-to-cart").click(function(event){ 
 
     //prevents the page from being refreshed 
 
     event.preventDefault(); 
 
     //sets the name variable to a clicked data-name 
 
     var name = $(this).attr("data-name"); 
 
     //sets the price to the number version of data-price attribute 
 
     var price = Number($(this).attr("data-price")); 
 
     var color = $('#colors option:selected').data('color'); 
 
     var material = $('#materials option:selected').data('material'); 
 
     
 
    $(".add-to-cart").attr({ 
 
     "data-color" : color, 
 
     "data-material" : material 
 
    }); 
 
     AS_shoppingCart.addItem(name, price, 1, color, material); 
 
     displayCart(); 
 
    }); 
 
    
 
    $("#show-cart").on("click",".delete-item", function(event){ 
 
     var name = $(this).attr("data-name"); 
 
     console.log(name); 
 
     AS_shoppingCart.removeItemAll(name); 
 
     displayCart(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

だから私の質問は、私が実際にそれらを削除するために、カート内の古いアイテムに自分の製品アイテムのオプションを設定する必要がないことを保証する行くのですか、です。

ありがとうございます。

EDIT：私のaddItem機能を示す：

//adds items to the cart 
 
AS_shoppingCart.addItem = function(name, price, quantity, color, material){ 
 
    /*checks to see if the item with the identical name exists in the cart 
 
    if so, it will only increment the quantity of the said item (no redundancies)*/ 
 
    for(let item of this.cartShop) { 
 
     if(item.name === name && item.color === color && item.material === material) { 
 
      item.quantity += quantity; 
 
      this.saveLocalCart(); 
 
      return; 
 
     }; 
 
    }; 
 
    var item = new this.Item(name, price, quantity, color, material); 
 
    this.cartShop.push(item); 
 
    this.saveLocalCart(); 
 
};

私はあなたがJavaScriptでスプライスを使用することができると思う

Answer 1

カートで最初の商品を見つけた後にbreakを使用したために起こります。 最初に見つかったアイテムを繰り返し処理するには、それを削除します。

UPDATE 2

またスプライスは、ループを逆にし、最初に最後から項目を削除するか、単にこのようなfilterを使用するので、あなたがより良いカウント項目の変更を提供します：

//now items store shopcart with all items except those you want to remove 
    //so you can store it back to this.cartShop or pass to another method to save new version of shopcart which is more acceptable way 

    let items = this.cartShop.filter(function(item) => { 
    return (item.name !== name && 
      item.color !== color && 
      item.material !== material) 
    } 

ので、最終的なコードは次のようになります。

AS_shoppingCart.removeItemAll = function(name, color, material){ 

     this.cartShop = this.cartShop.filter(function(item){ return !(item.name === name && item.color === color && item.material === material) }); 

     AS_shoppingCart.saveLocalCart(); 
}; 

Answer 2

...例えば

：

//removing from the quantity 
AS_shoppingCart.removeItem = function(name, color, material){ 
    //for every item object in the cart 
    for (let item of this.cartShop) { 
     //check if the name matches and remove from qunatity if true. 
     if(item.name === name && item.color === color && item.material === material) { 
      item.quantity --; // change this to -> name_of_your_array.splice(index, howmany); 
      this.saveLocalCart(); 
      //once the quantity reachers 0 or below, completely remove the item from cart. 
      if(item.quantity === 0 || item.quantity < 0) { 
       this.removeItemAll(item.name, item.color, item.material); // change this to -> name_of_your_array = []; 
       this.saveLocalCart(); 
      }; 
      break; 
     }; 
    }; 
    this.saveLocalCart(); 
}; 

Iまだわからないけど、私の場合は前に単に配列を使用する。しかし間違いなくあなたはスプライスを使うことができます。 :)