Проблема обновления количества в массиве объектов в локальном хранилище jquery

#javascript #jquery #arrays #local-storage #cart

Вопрос:

Я работаю с плагином корзины покупок, когда я добавляю товар в корзину, я проверяю, существует ли товар уже в корзине, а затем обновляю его количество вместо того, чтобы добавлять его снова. Все работает отлично, за исключением обновления количества. Я создал массив объектов и сохранил его в локальном хранилище, а затем распечатал в корзине. Я обновляю количество, но оно не работает.Всякий раз, когда я обновляю страницу. Вот cart.Js

  var data = localStorage.getItem("cartItem");
    var cartArray = data ? JSON.parse(data) : []; //array of cart Items data
    var total = 0;
    var shipping = 2;

    $(".addToCart").click(function(){

            var flag = 0;
        //Get all data of item to be added
            var id= $(this).data("id");
            var price= $(this).data("price");
            var image = $(this).data('image');
            var name = $(this).data("name");
            var quantity = $(this).data("quantity");
            var availability = $(this).data("availability");
            var weight = $(this).data("weight");


            //check if cart is empty to remove empty cart view
                 if(cartArray.length === 0) { 
                 $("#empty-cart").css("display","none");}

            //Traverse the cart list to check if item already exists or not
              var getItems = JSON.parse(localStorage.getItem('cartItem')); 
                 $.map(getItems,function(item){
                 if (item.I == id){
                        item.Q;
                      console.log(item.Q)
                     var p = parseInt((item.P).replace("$",""));
                     total  = p;
                   $("#cartList li").each(function(){
                    var i = $(this).find('.id').html();
                     if(i == id)
                       $(this).find('.quantity').val(item.Q);
                    })
                    flag = 1;
                    return false;
                   }
                 })
//Add new Item in cart
              if(flag == 0){
                  var itemObj ={
                    I : id,
                    IMG : image,
                    N : name,
                    W : weight,
                    A : availability,
                    P : price,
                    Q : quantity,
                  }
                     cartArray.push(itemObj);
                     localStorage.setItem('cartItem',JSON.stringify(cartArray));  
                       $("#cartList").prepend( "<li class='newItem'><p class='id'>" itemObj.I "</p><div class='picture'><img src='" itemObj.IMG "' ></div> <div class='details'><p class='name'>" itemObj.N "</p><span class='weight'>" itemObj.W "</span><span> /</span> <span class='avail'>" itemObj.A "</span><p class='price'>" itemObj.P "</p><a type='button' class='inc'> </a><input type='text' class='quantity' value=" itemObj.Q " ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>")

                      //increment in badge icon number when new item added in cart
                      var counterInc = parseInt($(".badge").html())   1;
                        $(".badge").html(counterInc); 
                      // Display shipping and total amonunt after adding items
                  $("#shipping_text, #total_amount_text, #checkout, #clear-cart").css("display","block");   
                  // Total amount calculation while adding items in cart
                     var q = itemObj.Q;
                     var p = (itemObj.P).replace("$","");
                      total  = q*p;
                 }
                 total  = shipping;
                 shipping = 0;
                $("#total_amount_text span").text("$" total "");    
           })
        

 var getItems = JSON.parse(localStorage.getItem('cartItem')); 
        if(getItems){
        $("#shipping_text, #total_amount_text, #checkout, #clear-cart").css("display","block");
        $.map(getItems, function(item){
              var newItem = ("<li class='newItem'><p class='id'>" item.I "</p><div class='picture'><img src='" item.IMG "' ></div> <div class='details'><p class='name'>" item.N "</p><span class='weight'>" item.W "</span><span> /</span> <span class='avail'>" item.A "</span><p class='price'>" item.P "</p><a type='button' class='inc'> </a><input type='text' class='quantity' value=" item.Q " ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>")
             $("#cartList").prepend(newItem);
            console.log(item.Q)
              var q = item.Q;
              var p = (item.P).replace("$","");
              total  = q*p;
          })
        total  = shipping;
        $("#total_amount_text span").text("$" total "");
      }
 

Комментарии:

1. Можете ли вы предоставить рабочий образец? изолировать любой код, предназначенный для выполнения обновления, и включить некоторый HTML-код, который он может переключать, чтобы мы могли видеть, что он не работает? На данный момент я не могу быть уверен, что это ваш браузер, код или плагин и т. Д.