jQuery购物车结算代码

最新推荐文章于 2024-05-15 08:52:02 发布
最新推荐文章于 2024-05-15 08:52:02 发布
阅读量1k 收藏 10
点赞数 2
分类专栏： query 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41801219/article/details/116065244
版权

基于jquery库写出来的代码

欢迎指导

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
    * {
	margin:0;
	padding:0;
}
body {
	font-size:13px;
}
input {
	vertical-align:middle;
}
a {
	text-decoration:none;
	color:#333333;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.pro-main {
	width:1000px;
	margin:100px auto;
}
.cart-info .all,.cart-info .pro-info,.cart-info .dj-price,.cart-info .num-pro,.cart-info .zj-price,.cart-info .cz {
	float:left;
}
.cart-info {
	height:40px;
	line-height:40px;
	background-color:#EFEFEF;
}
.cart-info .all {
	width:80px;
	padding:0px 15px;
}
.cart-info .all input {
	margin-right:8px;
}
.cart-info .pro-info {
	width:500px;
}
.cart-info .dj-price {
	width:80px;
}
.cart-info .num-pro {
	width:120px;
}
.cart-info .zj-price {
	width:110px;
}
.cart-info .cz {
	width:80px;
}
.cart-main {
	margin-top:15px;
}
.cart-item {
	border:1px solid #EFEFEF;
	padding:15px;
	overflow:hidden;
	margin-bottom:15px;
}
.cart-j {
	width:30px;
}
.pro-item {
	width:560px;
}
.pro-item .pro-img {
	width:80px;
	height:80px;
}
.pro-item .pro-title {
	width:225px;
	line-height:1.8;
	padding:0px 15px;
}
.pro-item .pro-gg {
	width:185px;
	padding:0px 15px;
	font-size:10px;
	color:#666;
}
.price-g {
	width:80px;
	color:black;
	font-weight:bold;
}
.price-num {
	width:95px;
	margin-right:30px;
	background-color:#EFEFEF;
	/* border:1px solid #EFEFEF;
	*/
}
.price-num .increment,.price-num .decrement {
	width:20px;
	float:left;
	text-align:center;
}
.price-num .num {
	float:left;
	width:50px;
	text-align:center;
}
.price-jiner {
	width:110px;
	color:red;
	font-weight:bold;
}
.price-caozuo {
	width:40px;
}
.priceAll {
	margin:0px 20px;
}
.priceAll span {
	padding:0px 8px;
	color:#f22d00;
	font-weight:bold;
	font-size:15px;
}
.spnum em {
	font-style:normal;
	padding:0px 8px;
	color:#f22d00;
	font-weight:bold;
	font-size:15px;
}
.js-btn {
	display:block;
	width:100px;
	text-align:center;
	background-color:#f22d00;
	color:white;
}
.pro-item img {
	width:80px;
}
    
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="vue.js"></script>
</head>

<body>
    <div class="pro-main">
    <div class="cart-info">
        <div class="all"><input type="checkbox" class="allCheck">全选</div>
        <div class="pro-info">商品信息</div>
        <div class="dj-price">单价</div>
        <div class="num-pro">数量</div>
        <div class="zj-price">金额</div>
        <div class="cz">操作</div>
    </div>
    <div class="cart-main">
        <div class="cart-item">
            <div class="cart-j fl">
                <input type="checkbox" class="j-check" >
            </div>
            <div class="pro-item fl">
                <div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
                <div class="pro-title fl">西部数据(WD)蓝盘 1TB1</div>
                <div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
            </div>
            <div class="price-g fl">￥28.60</div>
            <div class="price-num fl">
                <a href="javascript:;" class="increment">+</a>
                <input type="text" value="1" class="num">
                <a href="javascript:;" class="decrement">-</a>
            </div>
            <div class="price-jiner fl">￥28.60</div>
            <div class="price-caozuo fl"><a href="#" class="del-d">删除</a></div>
        </div>
        <div class="cart-item">
            <div class="cart-j fl">
                <input type="checkbox" class="j-check">
            </div>
            <div class="pro-item fl">
                <div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
                <div class="pro-title fl">西部数据(WD)蓝盘 1TB2</div>
                <div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
            </div>
            <div class="price-g fl">￥28.60</div>
            <div class="price-num fl">
                <a href="javascript:;" class="increment">+</a>
                <input type="text" value="1" class="num">
                <a href="javascript:;" class="decrement">-</a>
            </div>
            <div class="price-jiner fl">￥28.60</div>
            <div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
        </div>
        <div class="cart-item">
            <div class="cart-j fl">
                <input type="checkbox" class="j-check">
            </div>
            <div class="pro-item fl">
                <div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
                <div class="pro-title fl">西部数据(WD)蓝盘 1TB3</div>
                <div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
            </div>
            <div class="price-g fl">￥28.60</div>
            <div class="price-num fl">
                <a href="javascript:;" class="increment">+</a>
                <input type="text" value="1" class="num">
                <a href="javascript:;" class="decrement">-</a>
            </div>
            <div class="price-jiner fl">￥28.60</div>
            <div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
        </div>
    </div>
    <div class="cart-info">
        <div class="all fl"><input type="checkbox" class="allCheck">全选</div>
        <div class="fl">
            <a href="#" class="clearAll">删除</a>
            <a href="javascirpt:;" class="All-a">清除购物车的宝贝</a>
        </div>
        <div class="fr" style="width: 500px;">
            <div class="spnum fl">
                已选商品<em>0</em>件
            </div>
            <div class="priceAll fl">合计（不含运费）: <span>0.00</span></div>
            <div class="jiesuan fr"><a href="#" class="js-btn">结算</a></div>
        </div>
    </div>
</div>
</body>
   
</html>

$(function(){
   /* 
    1、全选
        ·单选当点击一行时状态变为选择状态
        ·当全选时所有行状态变为选择状态
        ·当取消全选时选择的行取消选择状态

    2、增加数量
        ·当点击加号时input加一
        
    3、减少数量
        ·当点击减号是input减一
        ·注意！变为0时则删除此行
    4、删除目标信息
        1、点击删除进行删除
        2、根据radio状态删除
        3、点击之后直接全部删除购物车的宝贝
    5、结算
        根据radio状态来结算    
            ·商品有多少件
            shopping_index
            ·合计的金额
            result_money
    */

    //购物车清空的话则为true
    var delete_state = false;
   
    function format(){
        $('.spnum em').text(0);
        $('.priceAll span').text(0.00.toFixed(2));
    }
    //当该元素发生改变则调用次函数
    $(".allCheck").change(function(){
           //如果当前元素的checked为true
         if($(this).prop("checked")){
                
                //将子radio的状态改变成true
                $(".j-check").prop("checked",true) 
                //因为有两个全选则需要把另外一个状态改掉
                $(".allCheck").prop("checked",true)
                getSum()
           }else{ 
            //否则将状态改为false
            $(".j-check").prop("checked",false) 
            $(".allCheck").prop("checked",false)
            //直接重置
            format()

           }
           
       })
    //遍历.j-check里所有的元素
    function delete_item(){
        
        $(".j-check").map(function(index,value){
            //找到cecked为true的元素
            if($(value).prop("checked")){
               //寻找到父级为.cart-item的元素并删除            
               $(value).parents(".cart-item").remove()
               format()
               getSum()
            }
            
        })

        if($(".j-check").length==0){
            if(delete_state){
                alert("别再点啦 已经清除完啦")
                throw new Error("已删除完毕")
            }
            delete_state=true
            
            }
        
    }
    $(".clearAll").click(function(event){
        //阻止页面刷新
        event.preventDefault();
        delete_item()
    })
    //清空宝贝
    $(".All-a").click(function(){
       if(!delete_state){
        format();
      
        $(".cart-main").children().remove();
        
        delete_state = true;
        //遍历.j-check里所有的元素
        }else{
            alert("别再点啦 已经清除完啦")
            throw new Error("已删除完毕")
        }
            
        
        })
    //单个删除
    $(".price-caozuo").click(function(){
        //更新数据在调用getsum
        $(this).siblings(".price-num").children(".num").val(0)
        $(this).siblings(".price-jiner").text("￥" + 0.00.toFixed(2))
        //遍历.j-check里所有的元素
        if($(".cart-item").length==0){
            delete_state=true
            
        }
        getSum();
        //查找该元素父级为.cart-item的元素删除
        $(this).parents(".cart-item").remove()
    })
    
    
    function increment(index,value){
        const num = $($(".num")[index]);//获取num[index]元素
        let  num_number = 1;//数量
        let price_un = $($(".price-g")[index]).text().replace("￥","")//商品单价
        let price_jiner = $($(".price-jiner")[index])//行金额
        var price_row;//暂时存放的行金额
        //判断 class等于decrement的则进入
        if(value.prop("class")=="decrement"){
            //给穿过来的元素绑定点击事件
            value.click(function(){
                //这个一定得加
                //重新获取数量赋值给num_number
                num_number = Number(num.val())
                //减一
                num_number -= 1;
                //一定要注意顺序减了之后再判断
               
                //重新设置金额 金额等于数量乘以单价
                 price_row = Number(price_un) * Number(num_number)
                if(num_number<1){
                    //小于1则删除
                    console.log($(value))
                    
                    //也是其中的一个bug
                    //选择行删除之后金额与件数都不会删减
                    //原因是没有取消radio选中
                    //注意顺序！！
                    //将金额，单价变为0
                    //在调用getsum                    
                    price_jiner.text("￥" + 0.00.toFixed(2))
                    num.prop("value",0);
                    getSum()
                   //这里出现这个bug的原因是删除了这行，你就不能对元素进行更新了，
                   //解决方案将判断放到更新完之后去
                    $(value).parents(".cart-item").remove()
                    
                    
                }
                //重新设置num的value值
                num.prop("value",num_number);
                //调用text函数重新赋值金额
                price_jiner.text("￥" + Math.round(price_row))
                getSum()
                
               
                
            })
            //这里以防万一也是要判断的value.prop("class")=="increment"
            //懒的写了
        }else{
            value.click(function(){
                
                //道理同上
                num_number = Number(num.val())
                num_number += 1;
                price_row = Number(price_un) * Number(num_number)
                num.prop("value",num_number);
                price_jiner.text("￥" + Math.round(price_row))
                getSum()
                
             })
        }
        
        
    }
    //数量加一
    //调用函数
    $(".increment").map(function(index,value){
        increment(index,$(this))

    })
    //数量减一
    //调用函数
    $(".decrement").map(function(index,value){
        increment(index,$(this));
        
    })

    // function result_shopping(value){
        
    //     $(value).click(function(){
    //         let result_m =$(this).parents(".cart-item").children(".price-jiner")
    //         var result_mo = Number($(result_m).text().replace("￥",""))
    //         if($(value).prop("checked")){
    //             shopping_index++
    //             result_money+=result_mo
    //         }else{
    //             shopping_index--
    //             if(shopping_index<0){
    //                 shopping_index=0;
    //                 return -1;
    //             }
    //             result_money-=result_mo
    //         }
    //         $(".priceAll span").text("￥"+result_money.toFixed(2))
    //         $(".spnum em").text(shopping_index)
    //     })
    // }
    // $(".j-check").map(function(index,value){
    //     result_shopping(value)
    // })



    function getSum() {
        // 总数量
        var num = 0;
        // 总价
        var money = 0;
        // 遍历数量
        $('.num').each(function(i, ele) {
           //i：当前元素下标
           //ele：当前元素
           //判断当前元素的父级(.price-num)除自己以外中的元素(.cart-j)下级中的(.j-check)的元素(checked)是否为true
            if ($(this).parent('.price-num').siblings('.cart-j').find('.j-check').prop('checked')) {
               //num=num+ele的value值
                num += parseInt($(ele).val());
                //如果num大于他的长度则吧他的长度返还给num
               if(num >= $(".num").length){
                   num =$(".num").length
               }
                $('.spnum em').text(num);
            }
        });
        //遍历金额
        $('.price-jiner').each(function(i, ele) {
        //如果当前元素除自己以外(.cart-j)下的(.j-check)的元素('checked')为true
            if ($(this).siblings('.cart-j').find('.j-check').prop('checked')) {
                //money = money+解析小数(ele的text值(小数点后面一位))
               
                money += parseFloat($(ele).text().substr(1));
                $('.priceAll span').text(money.toFixed(2));
            }
        })

    }
   
  $(".j-check").click(function(){
      if($(this).prop("checked")){
          
          getSum()
      }else{
        getSum()
        //解决getsum的缺陷
        //问题：当单击radio时出现金额与数量当取消时则不会调用getsum函数
        //为chencked的元素长度等于0的话则表明当前没有为chenched的值了
            if($(".j-check:checked").length == 0){
                
                //格式化
                format()
            }
        
        
      }
      
      
  })
 
  


    
    
    
    
})
e黑子q
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
用jQuery购物车结算
weixin_55472979的博客
11-25 1246
HTML： <div class="pro-main"> <div class="cart-info"> <div class="all"><input type="checkbox" class="allCheck">全选</div> <div class="pro-info">商品信息</div> <div class="dj-price">单价&l
Jquery特效---购物车 代码
koreain的博客
09-05 469
购物车                                                     LINE FRIENDS 新系列U盘16g         ¥234.00         月销量193         加入购物车                                          
购物车结算功能代码
11-17
一款界面很舒服的，用户体验很高的购购物才结算插件
JS购物车结算代码
03-30
JS实现购物车结算功能代码
2024年安卓最全Android 购物车实现（思路+步骤+源码），2024年最新阿里面试轮次
2401_84556681的博客
05-15 785
单选指的是单个店铺里单个商品选中，该店铺如果所有商品都选中，则店铺自动选中，而直接选中店铺则里面所有商品选中，这是单选也是多选，你选中店铺其实就是多选店铺中的商品。这么解释不知道你好不好理解，下面来说全选，全选就是所有商品或店铺选中，所有商品选中就是所有店铺选中，所有店铺选中就是所有商品选中，两者满足其一都是为全选，而全选也是可以主动和被动，主动就是用户点击这个全选按钮，然后选中所有商品或者店铺，被动就是通过对所有店铺的选中或者所有商品的选中来达成全选。这里面就一个关键点，那就是选中店铺的数量。
jQuery移动端购物车结算页面代码
01-08
jQuery移动端购物车结算页面代码,jQuery制作我的购物车商品添加删除结算手机页面模板代码。
JQuery实战购物车结算
11-26
用JQuery写的购物车结算实战案例，多个实战案例参考：http://blog.csdn.net/qq_19558705/article/details/49851879
jQuery手机端购物车结算代码
06-24
`jQuery手机端购物车结算代码`是一个专为移动端设计的购物车应用示例，它实现了用户在手机上选择商品、增删商品以及进行总价结算的功能。这个项目的核心是利用jQuery库来优化交互体验，提高用户操作的便捷性。 首先...
Bootstrap淘宝购物车结算代码
06-24
在“Bootstrap淘宝购物车结算代码”这个项目中，我们可以看到如何利用Bootstrap来创建一个功能完备的购物车结算页面，这在电商网站中是非常关键的一个环节。 首先，我们要理解购物车结算页面的基本构成。一个标准的...
原生JS实现购物车结算功能代码+zepto版
weixin_34001430的博客
03-25 338
  html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;hea...
jQuery实现购物车结算
qq_38308895的博客
06-18 630
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" cont
jQuery淘宝购物车页面商品结算
05-18
完美模仿淘宝购物车界面， jQuery淘宝购物车页面商品结算
jQuery淘宝购物车页面商品结算代码.zip
07-07
jQuery淘宝购物车页面商品结算代码.zip
使用jQuery实现购物车结算功能
10-19
主要为大家详细介绍了使用jQuery实现购物车结算功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery+Bootstrap布局购物车结算页面代码
06-10
这是一款jQuery+Bootstrap布局购物车结算页面代码，支持商品数量加减、全选、自动计算金额等。
原生JS实现购物车结算功能代码
11-11
插件描述：一款界面很舒服的，用户体验很高的购购物才结算插件。 参考示例：http://www.jq22.com/jquery-info4625
jQuery购物车商品结算功能实现 详解
孤单的时候狗作陪！的博客
11-24 2075
1 、从控制器讲数据渲染到HTML页面 namespace app\home\controller; use app\home\model\CarModel; use think\Controller; class Car extends Controller { function car() { $data = CarModel::with('user,goods,specGoods')->where('user_id',1) ->selec.
实现购物车的结算（jQuery）
Brave_TY的博客
03-12 2321
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;实现购物车动态操作&lt;/title&gt;  &lt;script src="jquery-3.2.1.min.js"&gt;&
购物车结算页面案例jQuery
qq_38294099的博客
12-02 1427
购物车结算页面案例jQuery $(function() { //1.全选 全不选 //全选按钮checkall 状态赋值给小按钮j-checkboxs // 事件使用change $(".checkall").change(function() { $(this).prop("checked"); $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
购物车结算页面前端代码
最新发布
05-16
购物车结算页面前端代码通常包括以下几个部分： 1. 页面布局：包括头部、导航、商品列表、结算区域等； 2. 商品列表：展示用户已选中的商品信息，包括商品名称、价格、数量等； 3. 结算区域：包括总价、优惠信息、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值