html
<html> <body> <!-- 购物车开始 --> <form class="buyCar"> <!-- 购物车上部开始 --> <div class="top"> <div class="box1"> <input type="checkbox" class="allSelect" id="allSelect"> <label for="allSelect">全选</label> </div> <div class="box2">商品</div> <div class="box3">单价</div> <div class="box4">数量</div> <div class="box5">小计</div> <div class="box6">操作</div> </div> <div class="clear"></div> <div class="top2"></div> <!-- 购物车上部结束 --> <!-- 购物车中部开始 --> <div class="middle"> <div class="goods"> <div class="box11"> <input type="checkbox" class="check"> <a href="#"><img src="img/goods1.png" alt=""></a> </div> <div class="box12"> <span class="jingzao">京造</span> <span>京造婴儿儿童理发器 宝宝剃头器 电推剪发器专业防水充电电动理发器 绿</span> </div> <div class="box13"> <span>颜色:绿色</span> </div> <div class="box14"> <div>¥<span>108.00</span></div> </div> <div class="box15"> <span class="minus">-</span> <span class="num">1</span> <span class="plus">+</span> </div> <div class="box16"> <div>¥<span class="subPrice" id="subPrice1">108.00</span></div> </div> <div class="box17"> <a href="#">删除</a> </div> </div> <div class=" clear"></div> <div class="goodsSpace"></div> <div class="goods"> <div class="box11"> <input type="checkbox" class="check"> <a href="#"><img src="img/goods2.png" alt=""></a> </div> <div class="box12"> <span class="shengxian">生鲜</span> <span>海南妃子笑荔枝 1.5kg装 新鲜水果</span> </div> <div class="box13"> <span>颜色:海南妃子笑荔枝 1.5k...</span> </div> <div class="box14"> <div>¥<span id="price2">29.90</span></div> </div> <div class="box15"> <span class="minus">-</span> <span class="num" id="num2">1</span> <span class="plus">+</span> </div> <div class="box16"> <div>¥<span class="subPrice" id="subPrice2">29.90</span></div> </div> <div class="box17"> <a href="#">删除</a> </div> </div> </div> <!-- 购物车中部结束 --> <!-- 购物车下部开始 --> <div class="bottom"> <div class="left"> <input type="checkbox" class=""> <label for="allSelect">全选</label> <a href="#">删除选中的商品</a> <a href="#">移到我的关注</a> <a href="#" class="clearCar">清理购物车</a> </div> <div class="right"> <div class="allPrice"> <div><span class="str">已选择<span class="fontColor1">0</span>件商品</span>总价:<span class="fontColor2">¥<span class="allPrice1" id="finalPrice">0.00</span></span></div> </div> <div class="balance">去结算</div> </div> </div> <!-- 购物车下部结束 --> </form> <!-- 购物车结束 --> </body></html>
script
<script> $(".plus").on("click",function(){ var num=$(this).prev().html(); //获取商品初始数量1 $(this).prev().html(Number(num)+1);//此时已将数字直接写入标签内,是动作 var buynum=$(this).prev().html(); //得到+1之后的商品数量,即购买数量 var price=$(this).parent().prev().children().children().html(); //获取商品单价 $(this).parent().next().children().children().html((buynum*Number(price)).toFixed(2)); // console.log(smallPrice); allPrice(); checkNum(); }); $(".minus").on("click",function(){ var num=$(this).next().html(); //获取此时商品数量 if(num>1){ $(this).next().html(Number(num)-1);//此时已将数字直接写入标签内,是动作 var buynum=$(this).next().html(); //得到-1之后的商品数量,即购买数量 var price=$(this).parent().prev().children().children().html(); //获取商品单价 $(this).parent().next().children().children().html((buynum*Number(price)).toFixed(2)); }else{ alert("再点就没了"); } allPrice(); checkNum(); }); //全选 $(".allSelect").click(function(){ // console.log(this); if(this.checked==true){ $(".check").prop("checked",true); }else{ $(".check").prop("checked",false); } allPrice(); checkNum(); }); //单选 $(".check").click(function(){ var check=$(".check").length; var checked=$(".check:checked").length; if(check==checked){ $(".allSelect").prop("checked",true); }else{ $(".allSelect").prop("checked",false); } allPrice(); checkNum(); }); function checkNum(){ var num=0; $(".check").each(function(){ if(this.checked==true){ var b=$($(this).parent().next().next().next().next().children()[1]).html(); num+=Number(b); } }); $(".fontColor1").html(num); } function allPrice(){ var sum=0; $(".check").each(function(){ if(this.checked==true){ var a=$($(this).parent().next().next().next().next().next().children().children()[0]).html(); //单类商品数量 // console.log($($(this).parent().next().next().next().next().next().children().children()[0]).html()); sum+=Number(a); } }); $(".allPrice1").html(sum); } </script>
css
body,div,a,img{padding: 0;margin: 0;font-size: 12px;color: #666;} a{text-decoration: none;} .clear{clear: both;} .buyCar{width: 1000px;height: 450px;margin: 0 auto;} .top{width: 1000px;height: 40px;line-height: 40px;background-color: #f3f3f3;border: 1px solid #f1f1f1;} .box1{width: 130px;float: left;} .box1 input{position: relative;top: 2px;} .box2{width: 440px;float: left;} .box3{width: 100px;float: left;text-align: center;} .box4{width: 100px;float: left;text-align: center;} .box5{width: 130px;float: left;text-align: center;} .box6{width: 100px;float: left;} .top2{width: 1000px;height: 40px;border-bottom: 2px solid #aaa;} .middle{width: 1000px;border: 1px solid #f1f1f1;} .goods{width: 1000px;height: 120px;padding-top: 18px;background-color: #fff4e8;} .box11{width: 130px;float: left;} .box11 img{width: 80px;height: 80px;vertical-align: top;} .box12{width: 210px;float: left;color: #333;} .jingzao{color: #fff;background-color: #e2231a;display: inline-block;width: 28px;height: 15px;line-height: 15px;text-align: center;} .shengxian{color: #02c555;border: 1px solid #02c555;display: inline-block;width: 28px;height: 15px;line-height: 15px;text-align: center;} .box13{width: 230px;float: left;text-indent: 20px;} .box14{width: 100px;float: left;text-align: center;color: #333;letter-spacing: 0.5px;} .box15{width: 100px;float: left;text-align: center;} .box15 .addLow{display: inline-block;width: 16px;height: 22px;border: 1px solid #cacbcb;position: relative;top: -4px;line-height: 22px;cursor: pointer;} .box15 .num{display: inline-block;width: 46px;height: 22px;border-top: 1px solid #cacbcb;border-bottom: 1px solid #cacbcb;position: relative;top: -4px;line-height: 22px;} .box16{width: 130px;float: left;text-align: center;} .box16 div{font-weight: bold;font-size: 13px;color: #000;letter-spacing: 1px;} .box17{width: 100px;float: left;} .goodsSpace{width: 1000px;height: 40px;border-top: 1px solid #ccc;} .bottom{width: 1000px;height: 50px;border: 1px solid #f0f0f0;line-height: 50px;margin-top: 20px;} .bottom .left{width: 320px;height: 50px;float: left;} .bottom .left input{position: relative;top: 2px;} .bottom .left a{margin-left: 8px;} .bottom .left .clearCar{font-weight: bold;} .bottom .right{width: 380px;height: 50px;float: right;} .bottom .right .allPrice{width: 260px;height: 40px;margin-top: 5px;float: left;line-height: 16px;} .bottom .right .allPrice .str{margin-right: 38px;} .bottom .right .allPrice .fontColor1{color: #f00;font-weight: bold;margin: 0 3px;} .bottom .right .allPrice .fontColor2{color: #f00;font-weight: bold;font-size: 16px;} .bottom .right .balance{width: 96px;height: 50px;background-color: #e64346;color: #fff;font-size: 18px;font-weight: bold;line-height: 50px;text-align: center;float: right;cursor: pointer;}