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:;

    padding:;

    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:;

}

/* 数量部分 */

.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实现购物车效果

最新文章

热门文章