Bahagian sebelumnya berkaitan reka bentuk halaman troli beli-belah

Bahagian ini melaksanakan pelbagai fungsi troli beli-belah melalui kod JavaScript.

Idea:
Langkah 1: Selepas halaman dimuatkan, jana jadual (senarai troli beli-belah) secara dinamik berdasarkan data setempat
Dapatkan objek nod untuk dikendalikan
Tentukan sama ada terdapat data dalam troli beli-belah?
Ya: Paparkan senarai beli-belah
Tidak: Gesa troli beli-belah kosong

Langkah 2: Selepas senarai troli beli-belah dijana secara dinamik, dapatkan semua objek nod label kotak semak dalam badan dan lihat yang manakah Pilihnya untuk mendapatkan jumlah kecil baris yang sepadan dan lakukan pengiraan jumlah harga.
Langkah 3: Tambahkan acara onchange untuk setiap kotak pilihan dan tukar jumlah harga mengikut operasi
Langkah 4: Pilih semua
Langkah 5: Tambah acara klik tetikus untuk butang tambah dan tolak untuk menukar produk Bilangan

Langkah 6: Padam
Dapatkan semua butang padam
Tambah acara klik tetikus untuk butang padam
Padamkan baris semasa dan kemas kini data setempat

<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) { //購(gòu)物車為空
  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() 方法通過(guò)指定名稱創(chuàng)建一個(gè)元素
    tr.setAttribute("pid", listObj[i].pid);
    //setAttribute() 方法創(chuàng)建或改變某個(gè)新屬性。如果指定屬性已經(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é)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)。
  }
}

/*
 功能：計(jì)算總價(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 對(duì)象的形式返回指定節(jié)點(diǎn)的父節(jié)點(diǎn)。如果指定節(jié)點(diǎn)沒有父節(jié)點(diǎn)，則返回 null。
      var temp = tr.children[5].firstElementChild.innerHTML;
      sum = Number(temp) + sum;
    }
  }
  return sum;
}
/*循環(huán)遍歷為每一個(gè)checkbox添加一個(gè)onchange事件*/
for(var i = 0, len = cks.length; i < len; i++) {
  cks[i].onchange = function() {
    checkAllChecked();
    totalPrice.innerHTML = getTotalPrice();
  }
}

/*全選實(shí)現(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;//下一個(gè)兄弟節(jié)點(diǎn)
    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;//上一個(gè)兄弟節(jié)點(diǎn)
    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) { //購(gòu)物車為空
      box.className = "box";
      table.className = "hide";
    } else {
      box.className = "box hide";
      table.className = "";
    }
    totalPrice.innerHTML = getTotalPrice();
  }
}

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

Buat fail cart.js dan masukkan kod JavaScript di atas ke dalamnya.

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

akan dipanggil dari halaman HTML kemudian untuk mencapai kesan modul fungsi.