前のセクションはショッピング カート ページのデザインに関連しました

このセクションでは、JavaScript コードを通じてショッピング カートのさまざまな機(jī)能を?qū)g裝します。

アイデア:
ステップ 1: ページがロードされた後、ローカル データに基づいてテーブル (ショッピング カート リスト) を動的に生成します
操作対象のノード オブジェクトを取得します
ショッピング カートにデータがあるかどうかを判斷しますか?
はい: ショッピング リストを表示します
いいえ: ショッピング カートが空であることを通知します

ステップ 2: ショッピング カート リストが動的に生成された後、tbody 內(nèi)のすべての checkeBox ラベル ノード オブジェクトを取得し、どれが取得するために選択されているかを確認(rèn)します対応する行の小計。
ステップ 3: 各チェックボックスに onchange イベントを追加し、操作に従って合計価格を変更します
ステップ 4: すべてを選択します
ステップ 5: 製品の數(shù)量を変更するための追加ボタンと減算ボタンにマウス クリック イベントを追加します

6 番目のステップ: 削除
すべての削除ボタンを取得します
削除ボタンのマウス クリック イベントを追加します
現(xiàn)在の行を削除し、ローカル データを更新します

<script>
var listObj = getAllData();
var table = document.getElementById("table")
var box = document.getElementById("box")
var tbody = document.getElementById("tbody");
var totalPrice = document.getElementById("totalPrice");
var allCheck = document.getElementById("allCheck");

if(listObj.length == 0) { //購物車為空
  box.className = "box";
  table.className = "hide";
} else {
  box.className = "box hide";
  table.className = "";
  for(var i = 0, len = listObj.length; i < len; i++) {
    var tr = document.createElement("tr"); //createElement() 方法通過指定名稱創(chuàng)建一個元素
    tr.setAttribute("pid", listObj[i].pid);
    //setAttribute() 方法創(chuàng)建或改變某個新屬性。如果指定屬性已經(jīng)存在,則只設(shè)置該值。
    //{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1},
    tr.innerHTML = '<td style="text-align: center;">' +
        '<input type="checkbox" class="ck"  />' +
        '</td>' +
        '<td>' +
        '<img src="' + listObj[i].pImg + '" alt="" />' +
        '</td>' +
        '<td style="color: #1E5494; font-size: 14px;">' + '<p style="margin: 0 25%;">'+ listObj[i].pDesc + '</p>' +
        '</td>' +
        '<td>' +
        '<button style="margin-left: 35%" class="down">-</button>' +
        '<input style="width: 10%;" type="text" value="' + listObj[i].pCount + '" readonly="readonly" />' +
        '<button class="up">+</button>' +
        '</td>' +
        '<td>' +
        '<span style="font-size: 16px;font-family: 微軟雅黑,宋體;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price +  '</span>' +
        '</td>' +
        '<td>' +
        '<span style="font-size: 16px;font-family: 微軟雅黑,宋體;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price * listObj[i].pCount + '</span>' +
        '</td>' +
        '<td>' +
        '<button style="display: block; margin:auto;" class="del" >刪除</button>' +
        '</td>';
    tbody.appendChild(tr);//appendChild() 方法向節(jié)點添加最后一個子節(jié)點。
  }
}

/*
 功能：計算總價格
 */
var cks = document.querySelectorAll("tbody .ck");
//querySelectorAll()方法返回匹配指定 CSS 選擇器元素的所有元素 。
function getTotalPrice() {
  cks = document.querySelectorAll("tbody .ck");
  var sum = 0;
  for(var i = 0, len = cks.length; i < len; i++) {
    if(cks[i].checked) { //如果當(dāng)前被選中
      var tr = cks[i].parentNode.parentNode;
      //parentNode 屬性以 Node 對象的形式返回指定節(jié)點的父節(jié)點。如果指定節(jié)點沒有父節(jié)點，則返回 null。
      var temp = tr.children[5].firstElementChild.innerHTML;
      sum = Number(temp) + sum;
    }
  }
  return sum;
}
/*循環(huán)遍歷為每一個checkbox添加一個onchange事件*/
for(var i = 0, len = cks.length; i < len; i++) {
  cks[i].onchange = function() {
    checkAllChecked();
    totalPrice.innerHTML = getTotalPrice();
  }
}

/*全選實現(xiàn)*/
allCheck.onchange = function() {
  if(this.checked) {
    for(var i = 0, len = cks.length; i < len; i++) {
      cks[i].checked = true;
    }
  } else {
    for(var i = 0, len = cks.length; i < len; i++) {
      cks[i].checked = false;
    }
  }
  totalPrice.innerHTML = getTotalPrice();
}

var downs = document.querySelectorAll(".down"); //一組減的按鈕
var ups = document.querySelectorAll(".up"); //一組加的按鈕
var dels = document.querySelectorAll(".del"); //一組刪除按鈕
for(var i = 0, len = downs.length; i < len; i++) {
  downs[i].onclick = function() {
    var txtObj = this.nextElementSibling;//下一個兄弟節(jié)點
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid"); //getAttribute() 方法返回指定屬性名的屬性值。
    txtObj.value = txtObj.value - 1;
    if(txtObj.value < 1) {
      txtObj.value = 1;
      updateObjById(pid, 0)
    } else {
      updateObjById(pid, -1)
    }
    tr.children[0].firstElementChild.checked = true;
    checkAllChecked();
    var price = tr.children[4].firstElementChild.innerHTML;
    tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
    totalPrice.innerHTML = getTotalPrice();

  }

  ups[i].onclick = function() {
    var txtObj = this.previousElementSibling;//上一個兄弟節(jié)點
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid");
    txtObj.value = Number(txtObj.value) + 1;
    updateObjById(pid, 1)
    tr.children[0].firstElementChild.checked = true;
    checkAllChecked()
    var price = tr.children[4].firstElementChild.innerHTML;
    tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
    totalPrice.innerHTML = getTotalPrice();
  }

  dels[i].onclick = function() {
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid")
    if(confirm("確定刪除？")) {
      //remove()  移除
      tr.remove();
      listObj = deleteObjByPid(pid);
    }
    if(listObj.length == 0) { //購物車為空
      box.className = "box";
      table.className = "hide";
    } else {
      box.className = "box hide";
      table.className = "";
    }
    totalPrice.innerHTML = getTotalPrice();
  }
}

/*檢測是否要全選*/
function checkAllChecked() {
  var isSelected = true; //全選是否會選中
  for(var j = 0, len = cks.length; j < len; j++) {
    if(cks[j].checked == false) {
      isSelected = false;
      break;
    }
  }
  allCheck.checked = isSelected;
}
</script>

cart.js ファイルを作成し、その中に上記の JavaScript コードを入れます。

<script type="text/javascript" src="cart.js"></script>

後で HTML ページから呼び出されて、汎用モジュールの効果が実現(xiàn)されます。