<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车实现功能</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车功能实现</title>
<script src="jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="shopping.js"></script>
<link rel="stylesheet" href="shopping.css">
</head>
<body>
<div class="main">
<div class="quanxuan">
<p class="checkbox fl"></p>
<p class="fl">全选</p>
<div class="clear"></div>
</div>
<div class="all">
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="fl number">1</span>
<div class="ddd">
<img src="images/reduce.png" class="fl add">
<img src="images/add.png" class="fl ad2 reduce">
</div>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="fl number">1</span>
<div class="ddd">
<img src="images/reduce.png" class="fl add">
<img src="images/add.png" class="fl ad2 reduce">
</div>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="fl number">1</span>
<div class="ddd">
<img src="images/reduce.png" class="fl add">
<img src="images/add.png" class="fl ad2 reduce">
</div>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="quanxuan1">
<p class="checkbox fl"></p>
<div class="fl">
<div class="fl">
<span class="fl number">1</span>
<div class="ddd">
<img src="images/reduce.png" class="fl add">
<img src="images/add.png" class="fl ad2 reduce">
</div>
<div class="clear"></div>
</div>
<span class="fl sum">300</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!--计算总价-->
<span class="zong">0</span>
</div>
</body>
</html>
</body>
</html>
* { padding: 0; margin: 0; box-sizing: border-box; } .fl {float: left;} .fr {float: right;} .clear {clear: both;} .main { width: 1200px; margin: 0 auto; } .quanxuan,.quanxuan1 {margin-top: 20px;} .checkbox { width: 16px; height: 16px; border: 1px solid #e5e5e5; } .checked { background: url(images/dui.png) no-repeat; background-size: 100%; } .reduce{ padding:2px; border:1px solid #cccccc; } .add{ padding:2px; border:1px solid #cccccc; } .number{ width: 50px; height: 30px; line-height: 30px; padding-left: 10px; border: 1px solid #e5e5e5; background-color: #fff; margin-left:30px; } .sum{margin-left: 100px;} .ddd{ width: 10px; height: 30px; float: left; cursor: pointer; text-align: center; margin-left: 2px; } .ad2 { margin-top:4px; }
$(function() { //单选 $(".quanxuan1 .checkbox").click(function(){ if ($(this).hasClass("checked")) { $(this).removeClass("checked"); $(".quanxuan").find(".checkbox").removeClass("checked"); $(this).siblings("div").find(".sum").removeClass("yong"); var arr1 = []; var lastMoney = 0; $(".yong").each(function(){ arr1.push(parseInt($(this).text())) }) for (var i = 0; i < arr1.length; i++) { lastMoney+=arr1[i] } $(".zong").text(lastMoney); }else{ $(this).addClass("checked"); $(this).siblings("div").find(".sum").addClass("yong"); var arr1 = []; var lastMoney = 0; $(".yong").each(function(){ arr1.push(parseInt($(this).text())) }) for (var i = 0; i < arr1.length; i++) { lastMoney+=arr1[i] } $(".zong").text(lastMoney); } if($(".quanxuan1 .checked").length==$(".quanxuan1 .checkbox").length){ $(".quanxuan .checkbox").addClass("checked"); } }) //全选功能 $(".quanxuan .checkbox").click(function(){ if ($(this).hasClass("checked")) { $(this).removeClass("checked"); $(".sum").removeClass("yong"); $(".quanxuan .checkbox").removeClass("checked"); $(".quanxuan1 .checkbox").removeClass("checked"); var arr1 = []; var lastMoney = 0; $(".yong").each(function(){ arr1.push(parseInt($(this).text())) }) for (var i = 0; i < arr1.length; i++) { lastMoney+=arr1[i] } $(".zong").text(lastMoney); }else{ $(this).addClass("checked"); $(".sum").addClass("yong"); $(".quanxuan .checkbox").addClass("checked"); $(".quanxuan1 .checkbox").addClass("checked"); var arr1 = []; var lastMoney = 0; $(".yong").each(function(){ arr1.push(parseInt($(this).text())) }) for (var i = 0; i < arr1.length; i++) { lastMoney+=arr1[i] } $(".zong").text(lastMoney); } }) //增加数量 $(".add").click(function() { what = $(this); var numadd = parseInt(what.parent().prev().text()); //console.log(numadd) var sum1 = parseInt(what.parents("div").siblings(".sum").text()); var num = parseInt(numadd + 1); //console.log(num) what.parent().prev().text(num); var sumd = sum1 / numadd; var sum2 = sumd * num; var a = what.parents("div").siblings(".sum").text(sum2); var arr1 = []; var lastMoney = 0; $(".yong").each(function() { arr1.push(parseInt($(this).text())) }) for(var i = 0; i < arr1.length; i++) { lastMoney += arr1[i] } $(".zong").text(lastMoney); }) //减少数量 $(".reduce").click(function() { what = $(this); var numadd = parseInt(what.parent().prev().text()); var sum1 = parseInt(what.parents("div").siblings(".sum").text()); if(what.parent().prev().text() == 1) { return false; } else { var num = parseInt(numadd) - 1; what.parent().prev().text(num); var sumd = sum1 / numadd; var sum2 = sumd * num; var a = what.parents("div").siblings(".sum").text(sum2); var arr1 = []; var lastMoney = 0; $(".yong").each(function() { arr1.push(parseInt($(this).text())) }) for(var i = 0; i < arr1.length; i++) { lastMoney += arr1[i] } $(".zong").text(lastMoney); } }) })