购物车实现功能2

最新推荐文章于 2023-06-03 21:51:15 发布
尅湖的雨
最新推荐文章于 2023-06-03 21:51:15 发布
阅读量201
点赞数
<!DOCTYPE html>
<!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="shop.js"></script>
   <link rel="stylesheet" href="shop.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="reduce fl">-</span>
               <span class="fl number">1</span>
               <span class="add fl">+</span>
               <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="reduce fl">-</span>
               <span class="fl number">1</span>
               <span class="add fl">+</span>
               <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="reduce fl">-</span>
               <span class="fl number">1</span>
               <span class="add fl">+</span>
               <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="reduce fl">-</span>
               <span class="fl number">1</span>
               <span class="add fl">+</span>
               <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>



* {
    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(dui.png) no-repeat;
    background-size: 100%;
}
.reduce{
    margin-left: 20px;
    cursor: pointer;
    display: block;
    text-align: center;
    width: 20px;
    height: 20px;
    background-color: #C1E2B3;
}
.add{
    cursor: pointer;
    text-align: center;
    width: 20px;
    height: 20px;
    background-color: #C1E2B3;
}
.number{
    width: 50px;
    height: 20px;
    padding-left: 10px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}
.sum{margin-left: 100px;}
$(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.prev().text());
      var sum1 = parseInt(what.parents("div").siblings(".sum").text());
      var num = parseInt(numadd) + 1;
      what.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.next().text());
      var sum1 = parseInt(what.parents("div").siblings(".sum").text());
      if(what.next().text() == 1) {
         return false;
      } else {
         var num = parseInt(numadd) - 1;
         what.next().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);
         
      }
   })
})
尅湖的雨
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车实现功能2

html>html>charset="UTF-8">购物车功能实现 src="jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"> type="text/javascript" src="shop.js"> rel="stylesheet" href="shop.css">class="main"
复制链接

扫一扫