JavaScript實現簡易購物車最全程式碼解析（ES6面向物件）

阿新 • • 發佈：2021-09-10

本文例項為大家分享了實現簡易購物車的具體程式碼，供大家參考，具體內容如下

程式碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ES6購物車</title>
  <style type="text/">
   table {
    width: 50%;
    position: relative;
    margin: 0px auto;
    border-collapse: collapse;
    border: 1px solid gray;
    box-sizing: border-box;
   }
   th {
    background-color: coral;
    height: 2.5em;
    margin: 0 auto;
   }
   tr {
    height: 2.5em;
    margin: 0 auto;
    text-align: center;
   }
   .box {
    margin: auto;
    width: 50%;
   }
  </style>
 </head>
 <body>
  <h3 style="text-align: center;margin-top: 100px;">猜你喜歡</h3>
  <table border="1px" id="update-table">
   <tbody>
   <tr>
    <th>序號</th>
    <th>商品名稱</th>
    <th>單價</th>
    <th>操作</th>
   </tr>
   <tr class="update-goods">
    <td>1</td>
    <td>肉夾饃</td>
    <td>8</td>
    <td><input type="button" class="update" value="加入購物車" /></td>
   </tr>
   <tr class="update-goods">
    <td>2</td>
    <td>擀麵皮</td>
    <td>6</td>
    <td><input type="button" class="update" value="加入購物車" /></td>
   </tr>
   <tr class="update-goods">
    <td>3</td>
    <td>冰封</td>
    <td>3</td>
    <td><input type="button" class="update" value="加入購物車" /></td>
   </tr>
   <tr class="update-goods">
    <td>4</td>
    <td>羊肉泡饃</td>
    <td>25</td>
    <td><input type="button" class="update" value="加入購物車" /></td>
   </tr>
   </tbody>
  </table>
  <h3 style="text-align: center;">購物車</h3>
  <table border="1px" id="goods">
   <tbody>
    <tr>
     <th>序號</th>
     <th>商品名稱</th>
     <th>數量</th>
     <th>單價</th>
     <th>小計</th>
     <th>操作</th>
    </tr>
    <tr>
     <td>1</td>
     <td>肉夾饃</td>
     <td>
      <button type="button">-</button>
      <span class="goods-num">0</span>
      <button type="button">+</button>
     </td>
     <td>
      單價:<span class="goods-price">8</span>
     </td>
     <td>
      小計:<span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="刪除" />
     </td>
    </tr>
    <tr>
     <td>2</td>
     <td>擀麵皮</td>
     <td>
www.cppcns.com 
      <button type="button">-</button>
      <span class="goods-num">0</span>
      <button type="button">+</button>
     </td>
     <td>
      單價:<span class="goods-price">6</span>
     </td>
     <td>
      小計:<span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="刪除" />
     </td>
    </tr>
    <tr>
     <td colspan="5">
      一共<span id="goods-total-num">0</span>件商品,共計花費<span id="goods-total-price">0</span>元。
     </td>
    </tr>
   </tbody>
  </table>
 </body>
</html>
<script type="text/script">
 class Cart {
  constructor() {
   this.eventBind();
  }
  //獲取並更新商品總數量
  getGoodsNumAndUpdate() {
   //獲取所有商品的數量
   let oGoodsNum = document.getElementsByClassName("goods-num");
   //存放商品數量疊加的總值
   let goodsTotalNum = 0;
   //迴圈所有商品
   for (let i = 0; i < oGoodsNum.length; i++) {
    //將所有迴圈到的商品數量相加
    goodsTotalNum += Number(oGoodsNum[i].innerHTML);
   }
   //獲取總結欄的商品總數
   let oGoodsTotalNum = document.getElementById("goods-total-num");
   //將迴圈所得商品數量之和賦給總結欄商品總數
   oGoodsTotalNum.innerHTML = goodsTotalNum;
  }
  //獲取並更新總貨物總價格
  getGoodsPriceAndUpdate() {
   //獲取小計
   let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
   //新 
建立一個元素接受小計的數值(用於最後賦值給獲取小計的元素)
   let goodsTotalPrice = 0 ;
   //迴圈所有小計
   for (let i = 0; i < oGoodsSinglePrice.length; i++) {
    //將所有迴圈到的小計數量相加
    goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
   }
   //獲取總結欄的價格總數
   let oGoodsTotalPrice = document.getElementById("goods-total-price");
   //將迴圈所得小計數量之和賦給總結欄價格總數
   oGoodsTotalPrice.innerHTML = goodsTotalPrice;
  }
  //2.獲取小計
  getSinglePrice(num,price) {
   //每行小計數等於單價與本行商品之積
   return num * price;
  }
  //加號按鈕方法
  addGoods(btn) {
   //獲取加號上一個兄弟元素(中間數值)
   let oGoodsNum = btn.previousElementSibling;
   //1.點選後數值加一
   oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
   //獲取單價(btn父元素的下一個元素的子元素)
   let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
   //獲取小計(btn父元素的下一個元素的下一個元素的子元素)
   let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
   //2.重新獲取小計數值並賦給小計
   oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML,oPrice.innerHTML);
   //3.獲取並更新商品總數量(呼叫重新執行>重新整理資料)
   this.getGoodsNumAndUpdate();
   //4.獲取並更新總貨物總價格(呼叫重新執行>重新整理資料)
   this.getGoodsPriceAndUpdate();
  }
  //減號按鈕方法
  minGoods(btn) {
   //獲取減號下一個兄弟元素(中間數值)
   let oGoodsNum = btn.nextElementSibling;
   //判斷如果商品數量大於零
   if (oGoodsNum.innerHTML > 0) {
    //1.點選後數值減一
    oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;
    //獲取單價(btn父元素的下一個元素的子元素)
    let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
    //獲取小計(btn父元素的下一個元素的下一個元素的子元素)
    let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
    //2.重新獲取小計數值並賦給小計
    oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML,oPrice.innerHTML);
    //3.獲取並更新商品總數量(呼叫重新執行>重新整理資料)
    this.getGoodsNumAndUpdate();
    //4.獲取並更新總貨物總價格(呼叫重新執行>重新整理資料)
    this.getGoodsPriceAndUpdate();
   }
  }
  //刪除按鈕方法
  delGoods(btn) {
   //獲取購物車table元素
   let god = document.getElementById("goods");
   //獲取此按鈕父元素的父元素
   let oTr = btn.parentNode.parentNode;
   //然後刪除此元素(在此指按鈕選擇的整個tr元素)
   oTr.remove();
   //重新排序號(迴圈名為god的table元素下的所有子元素tr)(從第二個子元素開始,並且去掉最後一個小計行)
   for (let i = 1; i < god.firstElementChild.children.length - 1; i++) {
    //將迴圈之後的元素數值i賦值給名為god的table元素下的子元素tr下的第一個子元素td
    god.firstElementChild.children[i].firstElementChild.innerHTML = i;
   }
   //3.獲取並更新商品總數量(呼叫重新執行>重新整理資料)
   thwww.cppcns.com 
is.getGoodsNumAndUpdate();
   //4.獲取並更新總貨物總價格(呼叫重新執行>重新整理資料)
   this.getGoodsPriceAndUpdate();
  }
  
  //新增訂單方法
  update() { 
   //獲取所有類名為update的元素
   let btn = document.getElementsByClassName("update");
   //獲取所有id名為update-table的元素
   let updateTable = document.getElementById("update-table");
   //獲取購物車table元素
   let god = document.getElementById("goods"); 
   //獲取購物車table元素的第一個子元素tbody的所有子元素tr
   let gods = god.firstElementChild.children;
   //目標元素賦值為false
   let flag = false;
   //這個this是為了避免在事件體內cart的物件被覆蓋
   let that = this;
   //迴圈所有類名為update的元素
   for (let i = 0; i < btn.length; i++) {
    //類名為update的點選事件
    btn[i].onclick = function() {
     //迴圈購物車table元素的第一個子元素tbody的所有子元素tr
     for (let j = 0; j < gods.length - 1; j++) {
      //迴圈判斷選單中是否有這個菜,如果有這個菜則加1;
      //本意為在購物車尋找相同名稱的商品如果有則執行購物車的這條資料商品數量+1;如果沒有則使flag為true跳出判斷
      //this是類名為update元素input標籤
      //購物車table中所有子元素tr遍歷 下的第一個子元素的內容==類名為update元素input的父元素td的上一個兄弟元素的上一個兄弟元素的內容 時執行
      if (gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML) {
       //購物車table中所有子元素tr遍歷 下的第二個子元素的內容(即為購物車中商品的數量)+1
       gods[j].children[2].children[1].innerHTML = " " + (Number(gods[j].children[2].children[1].innerHTML) + 1) + " ";
       //購物車table中所有子元素tr遍歷 下的第四個子元素的內容(即為購物車中小計的數值被賦值)
       gods[j].children[4].innerHTML = '小計:<span class="goods-single-price">' +
       gods[j].children[2].children[1].innerHTML * gods[j].children[3].firstElementChild.innerHTML + '</span>';
       //3.獲取並更新商品總數量(呼叫重新執行>重新整理資料)
       that.getGoodsNumAndUpdate();
       //4.獲取並更新總貨物總價格(呼叫重新執行>重新整理資料)
       that.getGoodsPriceAndUpdate();
       //給flag賦值為false
       flag = false;
       //跳出本次迴圈
       break;
      } else {
      //購物車table中所有子元素tr遍歷 下的第一個子元素的內容!=類名為update元素input的父元素td的上一個兄弟元素的上一個兄弟元素的內容 時執行
      //賦值給flag為true
       flag = true;
      }
     }
     if (flag) {
      //如果沒有這個菜則新增
      //建立一個節點tr
      let tr = document.createElement("tr");
      //新增這個節點的內容
      tr.innerHTML=
       '<td>'+(gods.length-1)+'</td>'+
       '<td>'+this.parentNode.previousElementSibling.previousElementSibling.innerHTML+
       '</td><td><button type="button">-</button><span class="goods-num"> 1 </span><button type="button"> +</button></td><td>單價:<span class="goods-price">' +
       this.parentNode.previousElementSibling.innerHTML +
       '</span></td><td>小計:<span class="goods-single-price">' + 
       this.parentNode.previousElementSibling.innerHTML +
       '</span></td><td><input type="button" class="deled" value="刪除" /></td>';
       //給tbody裡新增新元素
      god.firstElementChild.insertBefore(tr,god.firstElementChild.lastElementChild);
      //觸發事件按鈕
      that.eventBind();
      //3.獲取並更新商品總數量(呼叫重新執行>重新整理資料)
      that.getGoodsNumAndUpdate();
      //4.獲取並更新總貨物總價格(呼叫重新執行>重新整理資料)
      that.getGoodsPriceAndUpdate();
     }
    }
    //重新排猜你喜歡裡的商品序號
    for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
     //排好的數值賦值給新新增的商品序號值
     updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;
    }
   }
  }
  //觸發事件按鈕
  eventBind() {
   //獲取所有標籤名為botton的按鈕
   let oBtns = document.getElementsByTagName("button");
   //這個this是為了避免在事件體內cart的物件被覆蓋
   let that = this;
   //迴圈所有botton按鈕
   for (let i = 0; i < oBtns.length; i++) {
    if (i % 2) {//為奇數時觸發addGoods()方法
     owww.cppcns.comBtns[i].onclick = function() {
      that.addGoods(this);
     }
    } else {//為偶數時觸發minGoods()方法
     oBtns[i].onclick = function() {
      that.minGoods(this);
     }
    }
   }
   //獲取所有類名為deled的元素
   let oDelBtns = document.getElementsByClassName("deled");
   //迴圈所有deled元素
   for (let i = 0; i < oDelBtns.length; i++) {
    //deled元素的點選事件
    oDelBtns[i].onclick = function() {
     //呼叫delGoods()方法執行刪除效果
     that.delGoods(this);
    }
   }
   //呼叫新增訂單
   this.update();
  }
 }
 let c = new Cart();
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。