jQuery是一個非常流行的JS庫,它能夠極大地簡化JS代碼的編寫過程。在使用jQuery時,我們通常會遇到一些購物車方面的需求。那么如何使用jQuery實現購物車功能呢?下面就讓我們一起來看看。
//首先定義購物車數組 var carArray = []; //點擊加入購物車按鈕 $(".addCarBtn").on("click", function(){ //獲取商品id和名稱、價格 var id = $(this).attr("data-id"); var name = $(this).attr("data-name"); var price = $(this).attr("data-price"); //判斷購物車中是否有該商品,有則數量加1,沒有則加入購物車數組 var flag = false; for(var i=0; i<carArray.length; i++){ if(carArray[i].id == id){ carArray[i].num += 1; flag = true; break; } } if(!flag){ var obj = { "id": id, "name": name, "price": price, "num": 1 } carArray.push(obj); } //更新購物車圖標中的數量 var totalNum = 0; for(var i=0; i<carArray.length; i++){ totalNum += carArray[i].num; } $(".carNum").html(totalNum); }); //點擊購物車圖標,顯示購物車內容 $(".carIcon").on("click", function(){ var str = ""; for(var i=0; i<carArray.length; i++){ str += "<p>" + carArray[i].name + ",價格:" + carArray[i].price + ",數量:" + carArray[i].num + "</p>"; } $(".carContent").html(str); });
以上就是使用jQuery實現購物車功能的核心代碼。通過上面的代碼,我們首先定義了一個數組用于存儲購物車中的商品信息。當用戶點擊“加入購物車”按鈕時,我們會獲取該商品的id、名稱和價格,并根據id去判斷購物車數組中是否已經存在該商品。如果存在,則將該商品數量加1;否則,將該商品信息加入購物車數組中。
另外,在用戶點擊購物車圖標時,我們會遍歷購物車數組中的商品信息并將其展示在購物車內容區域中。如此一來,便能夠完美地實現購物車功能。
下一篇css怎么將圖片重復