Operasi DOM yang berkaitan untuk membangunkan troli beli-belah dengan JavaScript (1)

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"); //显示商品总数量的标签节点对象
var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮
//querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。

//约定好用名称为datas的cookie来存放购物车里的数据信息  datas里所存放的就是一个json字符串
var listStr = cookieObj.get("datas");
/*判断一下本地是否有一个购物车（datas），没有的话，创建一个空的购物车，有的话就直接拿来使用*/
if(!listStr) { //没有购物车     datas  json
  cookieObj.set({
    name: "datas",
    value: "[]"
  });
  listStr = cookieObj.get("datas");
}

var listObj = JSON.parse(listStr); //数组
/*循环遍历数组，获取每一个对象中的pCount值相加总和*/
var totalCount = 0; //默认为0
for(var i = 0, len = listObj.length; i < len; i++) {
  totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;

/*循环为每一个按钮添加点击事件*/
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;//获取所有子节点
    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() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
      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.