JavaScript開發購物車之相關DOM操作(一)
對主頁進行設計之後,就可以進行與主頁相關的DOM操作,涉及到添加按鈕的點擊事件,
cookie和json的應用,cookie主要為了讓當前數據與購物車進行共享,以方便操作。
想法:
第一步:取得所要操作的節點物件
第二步:當頁面載入完後,需要計算本機cookie存了多少【個】商品,把個數賦值給ccount
第三步:為每個商品對應的新增購物車按鈕綁定一個點擊事件onclick
更改本地的cookie
取得目前商品的pid
循環遍歷本地的cookie轉換後的數組,取出每個物件的pid進行對比,若相等則該商品不是第一次加入
從購物車中取出該商品,然後更pCount值追加1
否則:建立一個新的對象,儲存到購物。同時商品的數量為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>
建立一個index.js檔案把上面的JavaScript程式碼放入其中。
<script type="text/javascript" src="index.js"></script>
以後從HTML頁面調用,實作功能模組效果。