.product {
width:300px;
height:300px;
border:1px solid #ccc;
border-radius: 5px;
line-height: 30px;
margin:10px;
float:left;
padding:10px;
}
.product .add_to_cart {
width:200px;
cursor: pointer;
border:1px solid #666;
border-radius: 3px;
text-align: center;
}
.cart .title div, .cart .row div {
width:150px;
height:30px;
line-height: 30px;
float: left;
border: 1px solid;
overflow: hidden;
}
.cart, .cart .title, .cart .row, .cart .cart_body {
clear:both;
}
.cart_body .row .minus,.cart_body .row .add {
width:20px;
height: 25px;
border: 1px solid;
display:inline-block;
text-align: center;
cursor: pointer;
}
商品列表页面
列表：
百草味 坚果零食干果 内含开果器 夏威夷果奶油味200g/袋
14.90
加入购物车
意大利进口 Balocco 百乐可 脆皮酥 焦糖味 200g
25.89
加入购物车
小米（MI）智能手环1代【光感心率版】小米手环 黑色腕带 LED指示灯
75.99
加入购物车
金士顿（Kingston）16GB 80MB/s TF(Micro SD)Class10 UHS-I高速存储卡
55.00
加入购物车
查看购物车//利用的是事件委派。利用祖先元素
$(".box")[0].onclick = function(e){
e = e || event;
var src = e.target || e.srcElement;
if (src.className === "add_to_cart") { // 加入购物车
// 获取"加入购物车"所在大盒子中所有的孩子元素节点
var child = src.parentNode.children;
// 创建当前选购商品的对象
var prod = {
id : child[3].value,
title : child[1].innerHTML,
img : child[0].firstElementChild.src,
price : child[2].innerHTML,
amount : 1
};
// 查看cookie中是否有已保存的购物车数组结构
// 如果有，说明已经选购过一些商品了，没有，创建新数组结构来保存购物车
var _products = cookie("products");
if (_products) // 已有
_products = JSON.parse(_products);//cookie中保存的是文本字符串，所以获取的到的是字符串，但是你需要去后续存储，就需要将其转化成js中能用的
else
_products = [];
//再看你添加的商品是否已经在数组里面存在，不存在就需要去添加，存在则需要修改数量即可
var index = exist(prod.id, _products);
if (index != -1) { // 存在，改数量
_products[index].amount++;
} else { // 不存在
// 将当前选购商品添加到数组中
_products.push(prod);
}
// 将购物车数组保存到 cookie 中
cookie("products", JSON.stringify(_products), {expires:7});
}
}
// 指定id的商品在所有已选购的数组中是否存在
// 存在则返回其在数组中的下标，不存在返回-1
function exist(id, products) {
for (var i = 0; i < products.length; i++) {
if (products[i].id == id)
return i;
}
return -1;
}
网友评论