Selepas mereka bentuk halaman utama, anda boleh melakukan operasi DOM yang berkaitan dengan halaman utama, termasuk acara klik untuk menambah butang,

Penggunaan kuki dan json, kuki digunakan terutamanya untuk berkongsi data semasa dengan troli beli-belah , untuk memudahkan operasi.

Idea:

Langkah 1: Dapatkan objek nod untuk dikendalikan

Langkah 2: Selepas halaman dimuatkan, anda perlu mengira berapa banyak kuki tempatan yang disimpan Untuk produk, tetapkan nombor kepada kira

Langkah 3: Ikat acara klik pada klik

kepada butang tambah troli beli-belah yang sepadan dengan setiap produk untuk menukar kuki tempatan

Dapatkan pid produk semasa

Gelung melalui tatasusunan yang ditukar kuki tempatan, keluarkan pid setiap objek untuk perbandingan, jika ia sama, produk tidak ditambahkan buat kali pertama

dari troli beli-belah Keluarkan produk, dan kemudian tambahkan 1 pada nilai pCount

Jika tidak: Cipta objek baharu dan simpannya untuk membeli-belah. Pada masa yang sama, kuantiti produk ini ialah 1

<script>
var ccount = document.getElementById("ccount"); //顯示商品總數(shù)量的標(biāo)簽節(jié)點對象
var btns = document.querySelectorAll(".list dl dd button"); //所有的購物車按鈕
//querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節(jié)點數(shù)組)。

//約定好用名稱為datas的cookie來存放購物車?yán)锏臄?shù)據(jù)信息  datas里所存放的就是一個json字符串
var listStr = cookieObj.get("datas");
/*判斷一下本地是否有一個購物車（datas），沒有的話，創(chuàng)建一個空的購物車，有的話就直接拿來使用*/
if(!listStr) { //沒有購物車     datas  json
  cookieObj.set({
    name: "datas",
    value: "[]"
  });
  listStr = cookieObj.get("datas");
}

var listObj = JSON.parse(listStr); //數(shù)組
/*循環(huán)遍歷數(shù)組，獲取每一個對象中的pCount值相加總和*/
var totalCount = 0; //默認(rèn)為0
for(var i = 0, len = listObj.length; i < len; i++) {
  totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;

/*循環(huán)為每一個按鈕添加點擊事件*/
for(var i = 0, len = btns.length; i < len; i++) {
  btns[i].onclick = function() {
    var dl = this.parentNode.parentNode;
    //parentNode 獲取文檔層次中的父對象。
    var pid = dl.getAttribute("pid");//獲取自定義屬性
    //getAttribute() 方法通過名稱獲取屬性的值。
    var arrs = dl.children;//獲取所有子節(jié)點
    if(checkObjByPid(pid)) {
      listObj = updateObjById(pid, 1)
    } else {
      var imgSrc = arrs[0].firstElementChild.src;
      var pName = arrs[1].innerHTML;
      var pDesc = arrs[2].innerHTML;
      var price = arrs[3].firstElementChild.innerHTML;
      var obj = {
        pid: pid,
        pImg: imgSrc,
        pName: pName,
        pDesc: pDesc,
        price: price,
        pCount: 1
      };
      listObj.push(obj);
      //push() 方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。
      listObj = updateData(listObj);
    }
    ccount.innerHTML = getTotalCount();
  }
}
</script>

Buat fail index.js dan letakkan kod JavaScript di atas ke dalamnya.

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

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