Javascript如何更新購物車編號

Question

嗨，大家好，我決定嘗試建立一個電子商務網站，而不是使用Shopify，以便獲得一些經驗，但是我試圖獲得這一信息，以便當用戶單擊“添加到購物車”時，購物車數量會更新，但是我似乎無法使它正常工作

HTML：

<a class="shopping-cart" href="#"><i class="fa fa-shopping-cart"></i> <span class="cart-badge">1</span></a>
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button>

使用Javascript：

   $(document).ready(function(){
       $(".accordion-heading").click(function(){  
             if($(".accordion-body").is(':visible')){  /* check the condition accordion-body is visible or not */
                 $(".accordion-body").slideUp(200);  /*if content is visible then close accordion-body with specific time duration */
               $(".plusminus").text('+')    /* add plus sign */
           }
           else{
               $(this).next(".accordion-body").slideDown(200); /*if content not visible then 
                                                                                                           show the accordion-body */
               $(this).children(".plusminus").text('-');  /* add minus sign */
           }
       });
   });

我試圖用這個例子來幫助我： 鏈接所以我只想要它，以便用戶單擊“添加到購物車”，它將更新我建立的計數器

但是javascript不是我最擅長的技能，因此任何幫助都將是驚人的，謝謝

Answer 1

我添加了變量以跟蹤購物車中有多少物品。 每次單擊添加到購物車按鈕變量都會變+1，並更改跨度中顯示的文本。

 var currentItems = 0; $(document).ready(function(){ $(".accordion-heading").click(function(){ if($(".accordion-body").is(':visible')){ /* check the condition accordion-body is visible or not */ $(".accordion-body").slideUp(200); /*if content is visible then close accordion-body with specific time duration */ $(".plusminus").text('+') /* add plus sign */ } else{ $(this).next(".accordion-body").slideDown(200); /*if content not visible then show the accordion-body */ $(this).children(".plusminus").text('-'); /* add minus sign */ } }); $(".add-to-cart").click(function(){ currentItems++; $(".cart-badge").text(currentItems); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="shopping-cart" href="#"><i class="fa fa-shopping-cart"></i> <span class="cart-badge">0</span></a> <button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button>