홈페이지 디자인 후 버튼 추가 클릭 이벤트,
쿠키 및 json 적용 등 홈페이지와 관련된 DOM 작업을 수행할 수 있으며, 쿠키는 주로 장바구니와 현재 데이터를 공유하여 작업을 용이하게 하는 데 사용됩니다.
아이디어:
1단계: 동작할 노드 객체를 가져옵니다
2단계: 페이지가 로드된 후 로컬 쿠키에 저장된 제품 수를 계산하고 그 번호를 ccount에 할당해야 합니다
셋째 단계: 각 제품에 해당하는 장바구니 추가 버튼 클릭 시 클릭 이벤트를 바인딩합니다
로컬 쿠키 변경
현재 제품의 pid를 가져옵니다
로컬 쿠키 변환 배열을 반복하고 각 객체의 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 파일을 생성하고 위의 자바스크립트 코드를 넣어주세요.
<script type="text/javascript" src="index.js"></script>
나중에 HTML 페이지에서 호출하여 함수 모듈 효과를 얻습니다.
다음 섹션