联动的购物车代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title></title>

    <style type="text/css">
        html { font-family: "微软雅黑", "microsoft yahei", sans-serif; -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;  font-size: 14px; }
        body { margin: 0; line-height: 1.8;}

        .model-list{width: 250px;height: 200px; border: 1px solid #ddd;display: inline-block;padding:10px;}
        .list-name{}
        .list-price{}
        .list-btn-cart{}
        .list-edit{display: none;}
        .minus{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd;text-align: center; cursor: pointer; background: #fff;}
        .num{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd; text-align: center; background: #fff;}
        .add{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd;text-align: center; cursor: pointer; background: #fff;}

        .list-box{border-bottom: 1px solid #ddd; padding:15px;}
        .display-block{display: block;}
        .display-inline-block{display: inline-block;}
        .fixed-width{width: 150px; display: inline-block;}
        .text-right{text-align: right;}
        .cart-list{}

        .total-box{border-bottom: 1px solid #ddd; padding:15px;}
    </style>

</head>

<body>

    <div class="content-box">
        <div class="model-list list1">
            <div class="list-name">1name</div>
            <div class="list-price">2</div>
            <button class="list-btn-cart" data-id="list1" data-price="2">点击</button>
            <div class="list-edit">
                <button class="minus" data-id="list1" data-price="2">-</button>
                <span class="num">1</span>
                <button class="add" data-id="list1" data-price="2">+</button>
            </div>
        </div>
        <div class="model-list list2">
            <div class="list-name">1name</div>
            <div class="list-price">0.11</div>
            <button class="list-btn-cart" data-id="list2" data-price="0.11">点击</button>
            <div class="list-edit">
                <button class="minus" data-id="list2" data-price="0.11">-</button>
                <span class="num">1</span>
                <button class="add" data-id="list2" data-price="0.11">+</button>
            </div>
        </div>
    </div>


    <div>
        <div class="list-box">
            
        </div>
        <div class="total-box">
            <div>
                数量 :  <span id="copies"></span>     
                总计 :  <span id="total""></span>
            </div>
        </div>
    </div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(".list-btn-cart").on("click",function(){
            var listId = $(this).attr("data-id");        //可作为id的动态class
            var listPrice = $(this).attr("data-price");   //可作为list的动态价格
            $(this).css("display","none");                //可编辑的区域
            $("."+listId).find(".list-edit").css("display","block");
            $("."+listId).find(".num").text(1);

            //list-box加入
            var html ='<div class="cart-list '+listId+'">'+
                '<span class="list-name fixed-width">'+listId+'name</span>'+
                '<span class="list-edit display-inline-block">'+
                    '<button class="minus" data-id="'+listId+'" data-price="'+listPrice+'">-</button>'+
                    '<span class="num">1</span>'+
                    '<button class="add" data-id="'+listId+'" data-price="'+listPrice+'">+</button>'+
                '</span>'+
                '<span class="list-subtotal fixed-width text-right">'+listPrice+'</span>'+
            '</div>';

            $(".list-box").append(html);
            totalPrice();
        })
        //计算总价
        function totalPrice(){
            var copies = 0;
            var total = 0;
            $(".list-box .cart-list").each(function(){
                copies = copies + parseInt($(this).find(".num").text());
                $("#copies").text(copies);
                total = total + parseFloat($(this).find(".list-subtotal").text());
                $("#total").text(total.toFixed(2));
            })
        }
        //加
        $(document).on('click', '.add', function(){
            var listId = $(this).attr("data-id");   //可作为id的动态class
            var listPrice = $(this).attr("data-price");   //可作为list的动态价格 
            var amount = parseInt($(this).prev(".num").text());
            amount=amount+1;
            $("."+listId).find(".num").text(amount);

            var subtotal = amount * listPrice;
            $("."+listId).find(".list-subtotal").text(subtotal);
            totalPrice();
        })

        //减
        $(document).on('click', '.minus', function(){
            var listId = $(this).attr("data-id");   //可作为id的动态class
            var listPrice = $(this).attr("data-price");   //可作为list的动态价格 
            var amount = parseInt($(this).next(".num").text());
            var subtotal;
            if (amount>1) {
                amount=amount-1;
                $("."+listId).find(".num").text(amount);

                subtotal = amount * listPrice;
                $("."+listId).find(".list-subtotal").text(subtotal);
                totalPrice();
            }else{
                $("."+listId).find(".num").text(0);
                $("."+listId).find(".list-subtotal").text(0);
                totalPrice();

                $(".content-box ."+listId).find(".list-edit").css("display","none")
                $(".content-box ."+listId).find(".list-btn-cart").css("display","block");
                $(".list-box ."+listId).remove();
            }
        })

    </script>
</body>
</html>
联动的购物车代码

猜你喜欢
