<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.list{
display:block;
width:300px;
height:20px;
border:solid 1px #cccccc;
margin: 5px 0;
}
.add{
display: block;
height: 20px;
width: 230px;
float: left;
}
.index{
display:block;
width:30px;
height: 20px;
float: left;
border: solid 1px red;
}
.check{
display:block;
width:30px;
height: 20px;
float: right;
border: solid 1px red;
}
.price{
color: red;
}
#totalPrice{
display: block;
width:300px;
height: 30px;
position: absolute;
bottom:5px;
border: solid 1px #cccccc;
text-align: center;
}
.num_v{
width:20px;
}
</style>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
//+ -
function add(obj) {
var i = $('.b_add').index(obj);
addCar($($('.pro_c')[i]).text(), $($('.price_c')[i]).text(), 1);
numInd(i, 1);
}
function minus(obj) {
var i = $('.b_minus').index(obj);
addCar($($('.pro_c')[i]).text(), $($('.price_c')[i]).text(), -1);
numInd(i, -1);
}
//添加商品
function addCar(pro, price, num) {
var ind = inArray($('.pro_c'), pro);
if (ind) {
ind = ind - 1;
$($('.num_v')[ind]).val(parseInt($($('.num_v')[ind]).val()) + num);
if (parseInt($($('.num_v')[ind]).val()) == 0) {
delpro(pro);
}
} else {
$('#checkout ul').append('<li><span class="pro_c">' + pro + '</span>---<span class="num_c"><a href="#" onclick="add(this)" class="b_add">+</a><input type="text" class="num_v" value="' + num + '"/><a href="#" onclick="minus(this)" class="b_minus">-</a></span>--------￥<span class="price_c">' + price + '</span></li>');
$('#shopCar').val(parseInt($('#shopCar').val()) + 1);
}
total();
}
//创建购物车
function createCar(pro, price, num) {
//清空内容
$('#checkout').html('');
//创建商品目录
$('#checkout').append('<ul><li><span class="pro_c">' + pro + '</span>---<span class="num_c"><a href="#" onclick="add(this)" class="b_add">+</a><input type="text" class="num_v" value="' + num + '"/><a href="#" onclick="minus(this)" class="b_minus">-</a></span>--------￥<span class="price_c">' + price + '</span></li></ul>');
//数量索引
//创建总价
$('#checkout').append('<span id="totalPrice"></span>');
//标示状态
$('#shopCar').val(1);
//计算总价
total();
}
//删除商品
function delpro(pro) {
var off = confirm('确认删除');
if (off) {
$($('#checkout ul li:contains(' + pro + ')')).remove();
$('#shopCar').val(parseInt($('#shopCar').val()) - 1);
}
if (parseInt($('#shopCar').val()) <= 0) {
$('#checkout').html('');
$('#checkout').html('<p>空空如也，连颗老鼠屎都没有！</p>');
$('#shopCar').val('none');
}
}
//数量索引
function numInd(ind, num) {
if ($($('.index')[ind]).html() == '') {
$($('.index')[ind]).html(1);
} else {
$($('.index')[ind]).html(parseInt($($('.index')[ind]).html()) + num);
if ($($('.index')[ind]).html() == 0) {
$($('.index')[ind]).html('');
}
}
}
//计算价格
function total() {
var total = 0;
for (var i = 0; i < $('.pro_c').length; i++) {
total = total + parseInt($($('.num_v')[i]).val()) * parseInt($($('.price_c')[i]).text());
}
$('#totalPrice').html('￥' + total);
}
function inArray(arr, val) {
for (var i = 0; i < arr.length; i++) {
if ($(arr[i]).text() == val) {
return i + 1;
}
}
return false;
}
$(function() {
//初始化
$('#shopCar').val('none');
$('.add').each(function(i) {
//商品列表触发点击事件
$(this).click(function() {
//判断结算台是否为空
if ($('#shopCar').val() == 'none') {
createCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1);
numInd(i, 1);
} else {
addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1);
numInd(i, 1);
}
});
});
//减少商品数量
$('.index').each(function(i) {
$(this).click(function() {
var ind = inArray($('.pro_c'), $($('.pro')[i]).text());
if (ind) {
addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), -1);
numInd(i, -1);
} else {
if ($('#shopCar').val() == 'none') {
createCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1);
numInd(i, 1);
} else {
addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1);
numInd(i, 1);
}
}
});
});
//删除商品
$('.check').each(function(i) {
$(this).click(function() {
var ind = inArray($('.pro_c'), $($('.pro')[i]).text());
if (ind) {
delpro($($('.pro')[i]).text());
} else {
if ($('#shopCar').val() == 'none') {
createCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1);
} else {
addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1);
}
}
});
});
})
</script>
</head>
<body>
<div style="400px;height:400px;border:solid 1px #cccccc;float:left;margin:0 40px;">
<ul>
<li class="list">
<span class="index"></span><span class="add"><span class="pro">商品1</span>---￥<span class="price">23</span></span><span class="check"></span>
</li>
<li class="list">
<span class="index"></span><span class="add"><span class="pro">商品2</span>---￥<span class="price">41</span></span><span class="check"></span>
</li>
<li class="list">
<span class="index"></span><span class="add"><span class="pro">商品3</span>---￥<span class="price">36</span></span><span class="check"></span>
</li>
<li class="list">
<span class="index"></span><span class="add"><span class="pro">商品4</span>---￥<span class="price">1000</span></span><span class="check"></span>
</li>
</ul>
</div>
<div style="300px;min-height:300px;border:solid 1px #cccccc;float:left;margin:0 40px;text-align: center;position:relative;">
<!--使用hidden 储存数据-->
<input type="hidden" id="shopCar" value="none"/>
<h4>购物车</h4>
<div id="checkout" style="300px;min-height:250px">
<p>空空如也，连颗老鼠屎都没有！</p>
</div>
</div>
</body>
</html>