第一次
昨天才开通的博客，今天就来发表东西了，嘻嘻。这是我第一次在网上分享个人的东西，目前还是一位刚踏入web前端门的小妹子，很多地方都还是不懂，以后分享的东西还靠大神好好指点呀。
这几天在练习着做一个东西，删了又改，改了又删，反反复复好几次，我就把他粘贴到下面啦。
这个主要的功能就是实现一个购物车的数量增加，减少，编辑这些功能。
jQuery
$(document).ready(function(e) {
var sSum=0; //小计
$(".shoppingAdd").on('click',function(){//数量增加
var parent=$(this).parent(".shooppingNum");
var child=parent.children(".shopNum");
var subtotal=parent.siblings(".shooping_cartSubtotal")
child.html(parseInt(child.html())+1);
sSum=(parseInt(child.html())*$(".Uprice").html()).toFixed(2);
subtotal.children(".subtotal").html(sSum);
bSum();
});
$(".shoppingRduce").on('click',function(){//数量减少
var parent=$(this).parent(".shooppingNum");
var child=parent.children(".shopNum");
var subtotal=parent.siblings(".shooping_cartSubtotal");
if(parseInt(child.html())>1)
child.html(parseInt(child.html())-1);
sSum=(parseInt(child.html())*$(".Uprice").html()).toFixed(2);
subtotal.children(".subtotal").html(sSum);
bSum();
});
$(".shopping_cartList").each(function(index, element) {//结算
var bSum=0;
$(".btnNum").html(index+1);
$(".subtotal").each(function(index, element) {
bSum+=parseFloat($(".subtotal").eq(index).html())
$(".price").html(parseFloat(bSum).toFixed(2))
});
});
function bSum(){ //合计
var bSum=0;
$(".subtotal").each(function(index, element) {
bSum+=parseFloat($(".subtotal").eq(index).html())
$(".price").html(parseFloat(bSum).toFixed(2))
});
};
$(".shopping_edit").on('click',function(){//编辑
$(".select").toggle();
$(".shoppingBuy").toggle();
$(".selectAll").on('click',function(){//全选删除
if(this.checked){
$(".select").each(function(){this.checked=true;});
$(".del").click(function(){
$(".shopping_cartList").remove();
if($(".shopping_cartList").length==0){
$('.shopping_carDetails').css("display","none");
$(".shopping_carEmpy").css("display","block");
}
})
}else{
$(".select").each(function(){this.checked=false;});
}
});
$('.select').click(function(){//单选删除
var parent=$(this).parent(".shopping_cartList");
var dataId=parent.attr("data-id");
$(".del").attr("data-num",dataId);
});
$(".del").click(function(){//单选删除
var attr=$(this).attr("data-num");
$('[data-id="'+attr+'"]').remove();
if($(".shopping_cartList").length==0){
$('.shopping_carDetails').css("display","none");
$(".shopping_carEmpy").css("display","block");
}
})
});
});
单机“加”、“减”处，数量、小计、合计会随之改变计算
单机编辑处可进行“删除”
全部删除后的页面
html
<body>
<header>
<div class="headLeft iconfont"></div>
<div class="headCenter">购物车</div>
<div class="headRight">
<a class="iconfont" href="search.html"></a>
</div>
</header>
<div class="demo"></div>
<section class="shopping_carDetails ">
<div class="shopping_cartDetls">
<span class="iconfont"></span><span>四叶草书城</span><span class="shopping_edit">编辑</span>
</div>
<div>
<div class="shopping_cartList" data-id="10">
<input type="checkbox" class="select"/>
<dl>
<dt><img src="../img/shopping_cart(details)/shopping_cart(details)1.png" /></dt>
<dd>
<p>解忧杂货店</p>
<p>东野圭吾编著</p>
<p >￥<span class="Uprice">34.40</span></p>
</dd>
</dl>
<div class="shooppingNum"><span class="shoppingRduce">-</span><span class="shopNum">1</span><span class="shoppingAdd">+</span></div>
<div class="shooping_cartSubtotal"><span style="color:#333333">小计:</span>￥<span class="subtotal">34.58</span></div>
</div>
<div class="shopping_cartList" data-id="11">
<input type="checkbox" class="select"/>
<dl>
<dt><img src="../img/shopping_cart(details)/shopping_cart(details)1.png" /></dt>
<dd>
<p>解忧杂货店</p>
<p>东野圭吾编著</p>
<p >￥<span class="Uprice">34.40</span></p>
</dd>
</dl>
<div class="shooppingNum"><span class="shoppingRduce">-</span><span class="shopNum">1</span><span class="shoppingAdd">+</span></div>
<div class="shooping_cartSubtotal"><span style="color:#333333">小计:</span>￥<span class="subtotal">1</span></div>
</div>
</div>
<footer>
<div class="shoppingBuy"><p><span style="color:#333333">合计:</span>￥<span class="price"></span><a href="order.html"><button>结算(<span class="btnNum"></span>)</button></a></p></div>
<div class="shoppingDel"><input type="checkbox" class="selectAll"/>全选<button class="del">删除</button></div>
</footer>
</section>
<section class="shopping_carEmpy ">
<div class="shoopping_carEmpty">
<p>购物车空空~买点啥</p>
<button><a href="homePage.html">先去逛逛</a></button>
</div>
<p class="guess">猜你喜欢</p>
<div class="shoopping_carGuess">
<dl>
<dt><img src="../img/shopping_cart(empty)/shopping_cart(empty)1.png" /></dt>
<dd>
<p><a href="javascript:;">《火影忍者》</a></p>
<p>￥60.25</p>
</dd>
</dl>
<dl>
<dt><img src="../img/shopping_cart(empty)/shopping_cart(empty)2.png" /></dt>
<dd>
<p><a href="javascript:;">《漫画party》</a></p>
<p>￥45.21</p>
</dd>
</dl>
<dl>
<dt><img src="../img/shopping_cart(empty)/shopping_cart(empty)3.png" /></dt>
<dd>
<p><a href="javascript:;">《走遍万水千山》</a></p>
<p>￥19.98</p>
</dd>
</dl>
</div>
</section>
</body>
浙公网安备 33010602011771号