<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#car {
border: 2px solid #ccc;
300px;
min-height: 20px;
}
#car p {
margin: 0;
padding: 10px 0;
border-bottom: 1px dashed #cccccc;
}
#car button {
margin: 0 2px;
}
#car input {
50px;
}
.del {
float: right;
margin-right: 10px;
}
#car .dow {
margin-left: 40px;
}
</style>
</head>
<body>
<ul>
<li>帽子</li>
<li>鞋子</li>
<li>袜子</li>
<li>裤子</li>
</ul>
<h2>购物车</h2>
<div id="car"></div>
<button id="cl">清空购物车</button>
</body>
<script>
//向购物车添加商品
var gg = document.getElementsByTagName("li");
for (var i = 0; i < gg.length; i++) {
gg[i].onclick = function () {
var f = 1; //标记初始为1,表示购物车中没有重复商品
var gname = this.innerHTML; //获取当前点击商品的名称
var car = document.getElementById("car");
if (car.hasChildNodes()) { //判断购物车中是否有商品
var carnode = car.getElementsByTagName("p");
for (var i = 0; i < carnode.length; i++) {
var cdname = carnode[i].children[0].innerHTML;//获取购物车中商品的名称，children属性，获取当前对象的儿子集合
if (cdname == gname) { //判断当前商品是否在购物车中存在
f = 0;
carnode[i].children[2].value = parseInt(carnode[i].children[2].value) + 1; //商品数量加1
break; //结束循环
} else {
f = 1; //没有重复商品，标记设为1；
}
}
} else {
f = 1; //购物车为空标记设为1
}
if (f) { //如果标记为1，直接添加新的商品到购物车
var ge = document.createElement("p");
var con = "<span id='gn'>" + gname + "</span><button class='dow'>-</button><input type='text' value='1'><button>+</button><button class='del'>删除</button>";
ge.innerHTML = con;
document.getElementById("car").appendChild(ge);
}
}
}
//清空购物车
document.getElementById("cl").onclick = function () {
document.getElementById("car").innerHTML = "";
};
//通过事件监听和冒泡绑定购物车商品数量的修改和删除操作
document.getElementById("car").addEventListener("click", function (e) {
modi(e)
});
function modi(o) {
var obj = o.target;//获取当前点击的节点对象
if (obj.nodeName == "BUTTON") {
if (obj.innerHTML == "+") { //增加数量
obj.previousSibling.value = parseInt(obj.previousSibling.value) + 1;
}
if (obj.innerHTML == "-") { //减少数量
if (obj.nextSibling.value > 1) {
obj.nextSibling.value = parseInt(obj.nextSibling.value) - 1;
} else {
var thisg = obj.parentNode;
document.getElementById("car").removeChild(thisg);
}
}
if (obj.innerHTML == "删除") { //删除当前商品
var thisg = obj.parentNode;
document.getElementById("car").removeChild(thisg);
}
}
}
</script>
</html>