jQuery实现购物车效果

简单的购物车效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>购物车</title>
       <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div class="container">
            <h2 style="text-align: center;">购物车</h2>
            <!-- 内容部分 -->
            <div class="main">
                <ul>
                    <li>
                        <!-- 选择部分 -->
                        <label>
                            <input type="checkbox" name="" id="">
                        </label>
                        <!-- 产品 -->
                        <div class="cp">
                            <img src="img/timg.jpg">
                        </div>
                        <!-- 价格 -->
                        <div class="cp-price">
                            <span>32</span>
                            <span class="nummoneys" hidden="hidden">32</span>
                        </div>
                        <!-- 数量加减 -->
                        <div class="num">
                            <div class="sub">-</div>
                            <input type="number" name="" id="" value="1">
                            <div class="add">+</div>
                        </div>
                    </li>
                    <li>
                        <!-- 选择部分 -->
                        <label>
                            <input type="checkbox" name="" id="">
                        </label>
                        <!-- 产品 -->
                        <div class="cp">
                            <img src="img/timg.jpg">
                        </div>
                        <!-- 价格 -->
                        <div class="cp-price">
                            <span>45</span>
                            <span class="nummoneys" hidden="hidden">45</span>
                        </div>
                        <!-- 数量加减 -->
                        <div class="num">
                            <div class="sub">-</div>
                            <input type="number" name="" id="" value="1">
                            <div class="add">+</div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 结算部分 -->
            <div class="footer">
                <!-- 全选 -->
                <div class="select-all">
                    <label>
                        <input type="checkbox" />
                        <span>全选</span>
                    </label>
                </div>
                <div class="left">
                    <div>
                        <font>总件数：</font>
                        <span class="nums">0</span>
                        <font>件</font>
                    </div>
                    <div>
                       <font>总价：</font> 
                        <span class="moneys">￥0</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="js/jquery-2.1.0.js"></script>
    <script src="js/index.js"></script>
</html>

/* css样式 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    width: 400px;
    height: 500px;
    border: 1px solid red;
    margin: 0 auto;
}

.container ul li {
    border-bottom: 1px solid #666;
    display: flex;
    align-items: center;
}

.container ul li .cp {
    width: 80px;
    height: 80px;
}

.container ul li .cp img {
    width: 100%;
    height: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

/* 数量部分 */
.num {
    padding-left: 20px;
}

.num div {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.num input {
    width: 22px;
    box-sizing: border-box;
    text-align: center;
}

/* 结算部分 */
.left span {
    display: inline-block;
    width: 10%;
    text-align: center;
}

// jQuery
$(function(){
   // 全选按钮
   $(".select-all input").change(function(){
       // 将所有的单选按钮选中
       $("li label input").prop("checked",$(this).prop("checked"));
       numPrice()
   });
   
   // 单选按钮
     $("li label input").change(function(){
        // 获取单选框的个数
        var numInput=$("li label input").length;
        //获取被点击后复选框的个数 
        var selInput=$("li label input:checked").length;
        // 判断点击个数是否等于总个数
        if(numInput==selInput){
            $(".select-all input").prop("checked",true);
        }else{
            $(".select-all input").prop("checked",false);
        }
        numPrice()
     });
     
     // 价格及数量的计算
     function numPrice(){
         // 定义变量存放单个商品数量
         var numBox=$(".num input");
         // 定义变量存放价格和商品总数量
         var money=0;
         var num=0;
         for (var i = 0; i < numBox.length; i++) {
             if(numBox.eq(i).parents("li").find("label input").get(0).checked){
                 // 商品件数
                 num+=parseInt(numBox.eq(i).val());
                 // 商品价格
                 money+=parseFloat(numBox.eq(i).parents("li").find(".cp-price .nummoneys").text());
             }
         }   
         // 更换结算部分
         $(".nums").text(num);
         $(".moneys").text(money);
     }
     
     // 加商品个数
    $(".add").click(function(){
        //获取商品个数
        var addnum=parseInt($(this).parents("li").find(".num input").val());
        $(this).prev().val(addnum+=1);
        //计算该商品的总价格
        var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text());
        // 替换原价格
        $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys);
        numPrice()
    });
    // 减个数
    $(".sub").click(function(){
        //获取商品个数
        var addnum=parseInt($(this).parents("li").find(".num input").val());
        if(addnum<=1){
            addnum=1;
            return false;
        }
        $(this).next().val(addnum-=1);
        //计算该商品的总价格
        var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text());
        // 替换原价格
        $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys);
        numPrice()
    });
    // 手动改变数量
    $("li .num input").blur(function(){
        //获取商品个数
        var addnum=parseInt($(this).parents("li").find(".num input").val());
        if(addnum<=1){
            addnum=1;
             $(this).val(addnum)
        }
        $(this).next().val(addnum-=1);
        //计算该商品的总价格
        var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text());
        // 替换原价格
        $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys);
        numPrice()
    });
     
});

jQuery实现购物车效果

猜你喜欢