<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.9jQuery案例九购物车</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var totalPrice = 0;//定义总价
var num = 0;//商品数量
$('.addCar').click(function(){
//获取当前元素的父节点
$li = $(this).parent();
var pic = $li.find('.pic').html();
var inf = $li.find('.inf').html();
var price = $li.find('.price').html();
num++;
totalPrice += parseInt(price);
//测试
//console.log(pic + inf + price);
//console.log("总价"+totalPrice+"数量"+num);
//在car里追加内容
/*$('#car').append('<li><div class="goodsName">商品名称</div><div class="goodsPic">商品图片</div><div class="goodsPrice">商品单价</div><div class="goodsOperate">商品操作</div></li>');*/
$('#car').append('<li><div class="goodsName">'+inf+'</div><div class="goodsPic">'+pic+'</div><div class="goodsPrice">'+price+'</div><div class="goodsOperate">删除</div></li>');
//自己完成
//显示总价和数量
$('#totalPrice').html(totalPrice);
$('#goodsNum').html(num);
});
//常规思路进行删除操作
/*$('.goodsOperate').click(function(){alert("删除操作");});*/
//事件委托方式实现
$('#car').on('click','.goodsOperate',function(){
var goodsPrice = $(this).parent().find('.goodsPrice').html();
console.log("totalPrice"+totalPrice);
console.log("goodsPrice"+goodsPrice);
totalPrice -= parseInt(goodsPrice);
num--;
$('#totalPrice').html(totalPrice);
$('#goodsNum').html(num);
$(this).parent().remove();
//自己完成商品总价和数量的更新
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
#goodsList{
overflow:hidden;
border:solid 2px red;
width:600px;
}
#goodsList li{
float:left;
position:relative;
width:200px;
height:260px;
}
#goodsList li .pic{
width:200px;
height:200px;
overflow:hidden;
}
#goodsList li .pic img{
width:180px;
height:180px;
padding:10px;
}
#goodsList li .inf,#goodsList li .price,#goodsList li .foc{
width:200px;
height:20px;
line-height:20px;
font-size:16px;
text-align:center;
}
#goodsList li .addCar{
width:200px;
height:40px;
text-align:center;
line-height:40px;
font-size:20px;
background-color:red;
position:absolute;
bottom:0;
left:0;
display:none;
}
#goodsList li:hover .addCar{
display:block;
cursor:pointer;
}
#car li{ width:600px;
border-bottom: #F00 solid 2px;
border-left: #F00 solid 2px;
border-right: #F00 solid 2px;
overflow:hidden;
}
#car li div{
width:150px;
height:70px;
float:left;
text-align:center;
line-height:70px;
}
#car li .goodsPic img{
width:60px;
height:60px;
padding:5px;
}
.goodsOperate{
cursor:pointer;}
#total{
width:600px;
height:30px;
border-bottom: #F00 solid 2px;
border-left: #F00 solid 2px;
border-right: #F00 solid 2px;
overflow:hidden;
}
#total p{
width:300px;
float:left;
text-align:center;
line-height:30px;
height:30px;
}
</style>
</head>
<body>
<ul id="goodsList">
<li>
<div class="pic"><img src="img2/middle1.jpg"></div>
<div class="inf">酷派5721-1</div>
<div class="price">1000</div>
<div class="foc">21万人关注</div>
<div class="addCar">加入购物车</div>
</li>
<li>
<div class="pic"><img src="img2/middle2.jpg"></div>
<div class="inf">酷派5721-2</div>
<div class="price">2000</div>
<div class="foc">22万人关注</div>
<div class="addCar">加入购物车</div>
</li>
<li>
<div class="pic"><img src="img2/middle3.jpg"></div>
<div class="inf">酷派5721-3</div>
<div class="price">3000</div>
<div class="foc">23万人关注</div>
<div class="addCar">加入购物车</div>
</li>
</ul>
<ul id="car">
<li>
<div class="goodsName">商品名称</div>
<div class="goodsPic">商品图片</div>
<div class="goodsPrice">商品单价</div>
<div class="goodsOperate">商品操作</div>
</li>
</ul>
<div id="total">
<p>商品总价:<span id="totalPrice">0</span><span>元</span></p>
<p>商品数量:<span id="goodsNum">0</span><span>个</span></p>
</div>
</body>
</html>
默认效果图
单击加入购物车
单击删除选项
