三十八、jquery 购物车功能实现demo

说明：所有功能及实现原理和js购物车一致，只是将所用语法改写为了jquery语法

一、利用table标签简单创建界面样式；

二、首先实现全选、单选功能

1.全选功能时需要判断是否有checked属性；在jquery中设置或返回被选元素的属性/值的方法有两种attr()及prop()；

需要注意的是attr()并不能用来检测单选框是否被选择，它会返回undefined值，即并不能使用attr()方法获取checked属性；那么这里只能用prop()属性获取checked属性，但是注意，所返回的并不是checked/null,而true/false，所以在判断/设置单选框是否被选中时也需要用true/false；

还需注意的是：js和jquery不同的是，js无法对一组数据，即集合进行操作，需要对这组数据进行遍历，而jquery可以，jquery所获取的元素是集合，并且jquery存在隐式迭代，所以可以同时对一组数据进行操作；

//全选
$(".all_ck").click(function(){
    //判断是否选中
    if($(this).prop("checked")){ //true
        $(".ck_box").prop({  //隐式迭代  链式操作
            checked:true
        }).parents("tr").css("backgroundColor","pink");
    }else{
        $(".ck_box").prop({  //隐式迭代  链式操作
            checked:false
        }).parents("tr").css("backgroundColor","");
    }
});
//单选
$(".ck_box").each(function(){
    $(this).click(function(){
        if($(this).prop("checked")){
            $(this).parents("tr").css("backgroundColor","pink")
        }else {
            $(this).parents("tr").css("backgroundColor","")
        }
    })
})

三、数量事件：加减按钮的事件和输入数量的事件

1.加减事件和js的一样，只是这里添加了输入数量的事件，注意需要判读输入的值必须是数字不能是字符。可以用失焦blur()方法实现，也可以用按键事件，这里使用了keypress()和keyup();(按下、抬起事件)

注意：获取输入框value值使用的是val()方法

扫描二维码关注公众号，回复： 4528908 查看本文章

//数量
$(".minus").each(function(){
    $(this).click(function(){
        var number=$(this).siblings(".num").val();
        number--;
        $(this).siblings(".num").val(number<1?1:number);
    })
});
$(".add").each(function(){
    $(this).click(function(){
        var number=$(this).siblings(".num").val();
        number++;
        $(this).siblings(".num").val(number);
    })
});
$(".num").each(function(){
    $(this).keypress(function(e){
        if(isNaN(e.key)||e.keyCode==32){//32是空格键值
            return false;
        }
    }).keyup(function(){
        //调用小计 总价函数 
    });
});

四、封装小计、总价函数，并调用函数

这两个函数与js封装一致；

唯一需要注意的是小计函数中因为要给加减和输入框事件调用，其传参的对象不一致，在函数中需要用is()方法对对象进行判断；（is()方法：根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true）

//封装小计函数
function SamllPrice(obj) {
    var number=0;
    if(obj.is(".num")){
        number=obj.val();
    }else{
        number=obj.siblings(".num").val();
    }
    //获取单价
    var len=obj.parent().prev().html().length;
    var price=parseFloat(obj.parent().prev().html().substr(1,len-1));
    //计算小计
    obj.parent().next().html("￥"+(price*number).toFixed(2));
}
//封装总价
function AllPrice(){
    var all_price=0;
    $(".ck_box").each(function(){
        if($(this).prop("checked")){
            var len=$(this).parents("tr").find(".smallprice").html().length;
            all_price+=parseFloat($(this).parents("tr").find(".smallprice").html().substr(1,len));
        }
    })
    $(".allprice").html("￥"+all_price.toFixed(2));
}

五、删除事件

$(".delet").each(function(){
   $(this).click(function(){
       if($(this).parents("tr").find(".ck_box").prop("checked")){
           $(this).parents("tr").remove();
           AllPrice();
       }
   })
});

六、完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车demo</title>
    <style>
        *{margin: 0;padding: 0;}
        .tab{
            width: 1000px;
            height: auto;
            margin: 20px auto;
            border-collapse: collapse;/*去除table间距*/
        }
        .header,.footer{
            width: 100%;
            line-height: 40px;
            background-color: rgba(241, 241, 241, 0.42);
            text-align: center;
        }
        .td_d,.goods{
            width: 10%;
            border: 1px solid black;
        }
        .goods{
            width: 40%;
            text-align: left;
            padding-left: 20px;
        }
        .list{
            text-align: center;
        }
        .num{
            width: 35px;
            outline: none;
            text-align: center;
        }
        .minus,.add{
            width: 25px;
        }
    </style>
</head>
<body>
<table class="tab">
    <tr class="header">
        <td class="td_d"><input class="all_ck" type="checkbox">全选</td>
        <td class="goods">商品</td>
        <td class="td_d">单价</td>
        <td class="td_d">数量</td>
        <td class="td_d">小计</td>
        <td class="td_d">操作</td>
    </tr>
    <tr class="list">
        <td class="td_d"><input class="ck_box" type="checkbox"></td>
        <td class="goods"><img src="image/1.png" align="left"><span>三只松鼠-碧根果210g</span></td>
        <td class="td_d price">￥38.90</td>
        <td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
        <td class="td_d smallprice">￥38.90</td>
        <td class="td_d"><button class="delet">删除</button></td>
    </tr>
    <tr class="list">
        <td class="td_d"><input class="ck_box" type="checkbox"></td>
        <td class="goods"><img src="image/1.png" align="left"><span>三只松鼠-碧根果210g</span></td>
        <td class="td_d price">￥38.90</td>
        <td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
        <td class="td_d smallprice">￥38.90</td>
        <td class="td_d"><button class="delet">删除</button></td>
    </tr>
    <tr class="list">
        <td class="td_d"><input class="ck_box" type="checkbox"></td>
        <td class="goods"><img src="image/1.png" align="left"><span>三只松鼠-碧根果210g</span></td>
        <td class="td_d price">￥38.90</td>
        <td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
        <td class="td_d smallprice">￥38.90</td>
        <td class="td_d"><button class="delet">删除</button></td>
    </tr>
    <tr class="list">
        <td class="td_d"><input class="ck_box" type="checkbox"></td>
        <td class="goods"><img src="image/1.png" align="left"><span>三只松鼠-碧根果210g</span></td>
        <td class="td_d price">￥38.90</td>
        <td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
        <td class="td_d smallprice">￥38.90</td>
        <td class="td_d"><button class="delet">删除</button></td>
    </tr>
    <tr class="list">
        <td class="td_d"><input class="ck_box" type="checkbox"></td>
        <td class="goods"><img src="image/1.png" align="left"><span>三只松鼠-碧根果210g</span></td>
        <td class="td_d price">￥38.90</td>
        <td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
        <td class="td_d smallprice">￥38.90</td>
        <td class="td_d"><button class="delet">删除</button></td>
    </tr>
    <tr class="footer">
        <td colspan="6">总价：<span class="allprice">￥0.00</span></td>
    </tr>
</table>
<script src="js/jquery-3.0.0.js"></script>
<script>
    $(function(){
        //全选
        $(".all_ck").click(function(){
            //判断是否选中
            if($(this).prop("checked")){ //true
                $(".ck_box").prop({  //隐式迭代  链式操作
                    checked:true
                }).parents("tr").css("backgroundColor","pink");
            }else{
                $(".ck_box").prop({  //隐式迭代  链式操作
                    checked:false
                }).parents("tr").css("backgroundColor","");
            }
            AllPrice();
        });
        //单选
        $(".ck_box").each(function(){
            $(this).click(function(){
                if($(this).prop("checked")){
                    $(this).parents("tr").css("backgroundColor","pink")
                }else {
                    $(this).parents("tr").css("backgroundColor","")
                }
                AllPrice();
            });
        });
        //数量
        $(".minus").each(function(){
            $(this).click(function(){
                var number=$(this).siblings(".num").val();
                number--;
                $(this).siblings(".num").val(number<1?1:number);
                SamllPrice($(this));
                AllPrice();
            })
        });
        $(".add").each(function(){
            $(this).click(function(){
                var number=$(this).siblings(".num").val();
                number++;
                $(this).siblings(".num").val(number);
                SamllPrice($(this));
                AllPrice();
            })
        });
        $(".num").each(function(){
            $(this).keypress(function(e){
                if(isNaN(e.key)||e.keyCode==32){//32是空格键值
                    return false;
                }
            }).keyup(function(){
                //调用小计 总价函数
                SamllPrice($(this));
                AllPrice();
            });
        });
        //删除事件
        $(".delet").each(function(){
           $(this).click(function(){
               if($(this).parents("tr").find(".ck_box").prop("checked")){
                   $(this).parents("tr").remove();
                   AllPrice();
               }
           })
        });
        //封装小计函数
        function SamllPrice(obj) {
            var number=0;
            if(obj.is(".num")){
                number=obj.val();
            }else{
                number=obj.siblings(".num").val();
            }
            //获取单价
            var len=obj.parent().prev().html().length;
            var price=parseFloat(obj.parent().prev().html().substr(1,len-1));
            //计算小计
            obj.parent().next().html("￥"+(price*number).toFixed(2));
        }
        //封装总价
        function AllPrice(){
            var all_price=0;
            $(".ck_box").each(function(){
                if($(this).prop("checked")){
                    var len=$(this).parents("tr").find(".smallprice").html().length;
                    all_price+=parseFloat($(this).parents("tr").find(".smallprice").html().substr(1,len));
                }
            })
            $(".allprice").html("￥"+all_price.toFixed(2));
        }
    })
</script>
</body>
</html>

三十八、jquery 购物车功能实现demo

猜你喜欢