<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="#" type="image/png">
<title></title>
<style type="text/css">
html { font-family: "微软雅黑", "microsoft yahei", sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 14px; }
body { margin: 0; line-height: 1.8;}
.model-list{width: 250px;height: 200px; border: 1px solid #ddd;display: inline-block;padding:10px;}
.list-name{}
.list-price{}
.list-btn-cart{}
.list-edit{display: none;}
.minus{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd;text-align: center; cursor: pointer; background: #fff;}
.num{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd; text-align: center; background: #fff;}
.add{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd;text-align: center; cursor: pointer; background: #fff;}
.list-box{border-bottom: 1px solid #ddd; padding:15px;}
.display-block{display: block;}
.display-inline-block{display: inline-block;}
.fixed-width{width: 150px; display: inline-block;}
.text-right{text-align: right;}
.cart-list{}
.total-box{border-bottom: 1px solid #ddd; padding:15px;}
</style>
</head>
<body>
<div class="content-box">
<div class="model-list list1">
<div class="list-name">1name</div>
<div class="list-price">2</div>
<button class="list-btn-cart" data-id="list1" data-price="2">点击</button>
<div class="list-edit">
<button class="minus" data-id="list1" data-price="2">-</button>
<span class="num">1</span>
<button class="add" data-id="list1" data-price="2">+</button>
</div>
</div>
<div class="model-list list2">
<div class="list-name">1name</div>
<div class="list-price">0.11</div>
<button class="list-btn-cart" data-id="list2" data-price="0.11">点击</button>
<div class="list-edit">
<button class="minus" data-id="list2" data-price="0.11">-</button>
<span class="num">1</span>
<button class="add" data-id="list2" data-price="0.11">+</button>
</div>
</div>
</div>
<div>
<div class="list-box">
</div>
<div class="total-box">
<div>
数量 : <span id="copies"></span>
总计 : <span id="total""></span>
</div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(".list-btn-cart").on("click",function(){
var listId = $(this).attr("data-id"); //可作为id的动态class
var listPrice = $(this).attr("data-price"); //可作为list的动态价格
$(this).css("display","none"); //可编辑的区域
$("."+listId).find(".list-edit").css("display","block");
$("."+listId).find(".num").text(1);
//list-box加入
var html ='<div class="cart-list '+listId+'">'+
'<span class="list-name fixed-width">'+listId+'name</span>'+
'<span class="list-edit display-inline-block">'+
'<button class="minus" data-id="'+listId+'" data-price="'+listPrice+'">-</button>'+
'<span class="num">1</span>'+
'<button class="add" data-id="'+listId+'" data-price="'+listPrice+'">+</button>'+
'</span>'+
'<span class="list-subtotal fixed-width text-right">'+listPrice+'</span>'+
'</div>';
$(".list-box").append(html);
totalPrice();
})
//计算总价
function totalPrice(){
var copies = 0;
var total = 0;
$(".list-box .cart-list").each(function(){
copies = copies + parseInt($(this).find(".num").text());
$("#copies").text(copies);
total = total + parseFloat($(this).find(".list-subtotal").text());
$("#total").text(total.toFixed(2));
})
}
//加
$(document).on('click', '.add', function(){
var listId = $(this).attr("data-id"); //可作为id的动态class
var listPrice = $(this).attr("data-price"); //可作为list的动态价格
var amount = parseInt($(this).prev(".num").text());
amount=amount+1;
$("."+listId).find(".num").text(amount);
var subtotal = amount * listPrice;
$("."+listId).find(".list-subtotal").text(subtotal);
totalPrice();
})
//减
$(document).on('click', '.minus', function(){
var listId = $(this).attr("data-id"); //可作为id的动态class
var listPrice = $(this).attr("data-price"); //可作为list的动态价格
var amount = parseInt($(this).next(".num").text());
var subtotal;
if (amount>1) {
amount=amount-1;
$("."+listId).find(".num").text(amount);
subtotal = amount * listPrice;
$("."+listId).find(".list-subtotal").text(subtotal);
totalPrice();
}else{
$("."+listId).find(".num").text(0);
$("."+listId).find(".list-subtotal").text(0);
totalPrice();
$(".content-box ."+listId).find(".list-edit").css("display","none")
$(".content-box ."+listId).find(".list-btn-cart").css("display","block");
$(".list-box ."+listId).remove();
}
})
</script>
</body>
</html>
07-03
1092