jquery购物车

2024-03-07 21:24:51

html构建主题页面

<body>
    <div class="head">
        <ul>
            <li><input type="checkbox" class="all"> 全选</li>
            <li class="good">商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>
    <div class="goods w">
        <div><input type="checkbox" class="select"></div>
        <div class="food">
            <div class="pic">
                <img src="images/零食1.png">
                <h3>百草味泡椒去骨鸭掌(酸辣味)125g肉类休闲零食鸭爪卤味网红小吃</h3>
            </div>
            <div class="price">￥19.90</div>
            <div class="num">
                <a href="javascript:;" class="decrement">-</a>
                <input type="text " value="2" class="digit">
                <a href="javascript:;" class="increment">+</a>
            </div>
            <div class="sum">￥19.90</div>
        </div>
    </div>
    <div class="goods w">
        <div><input type="checkbox" class="select"></div>
        <div class="food">
            <div class="pic">
                <img src="images/零食2.png">
                <h3>百草味黑胡椒鸡胸肉150g 低脂高蛋白健身代餐休闲儿童零食小吃</h3>
            </div>
            <div class="price">￥29.90</div>
            <div class="num">
                <a href="javascript:;" class="decrement">-</a>
                <input type="text " value="1" class="digit">
                <a href="javascript:;" class="increment">+</a>

            </div>
            <div class="sum">￥29.90</div>

        </div>
    </div>
    <div class="goods w">
        <div><input type="checkbox" class="select"></div>
        <div class="food">
            <div class="pic">
                <img src="images/零食3.png">
                <h3>百草味零食大礼包组合一整箱充饥夜宵麻辣卤味休闲食品小吃送女生</h3>
            </div>
            <div class="price">￥39.90</div>
            <div class="num">
                <a href="javascript:;" class="decrement">-</a>
                <input type="text " value="1" class="digit">
                <a href="javascript:;" class="increment">+</a>
            </div>
            <div class="sum">￥39.90</div>
        </div>
    </div>
</body>

jquery实现全选框和小计的数值计算

<script>
    $(function() {
        // 点击全选其他小框都选中
        $(".all").change(function() {
            $(".select").prop("checked", $(".all").prop("checked"))
        })
        $(".select").change(function() {
                // 1.其他小框都选中 全选框也选中 有小框没被选中 全选框也不被选中
                if ($(".select:checked").length == $(".select").length) {
                    $(".all").prop("checked", true)
                } else {
                    $(".all").prop("checked", false)
                }
            })
            //2. 点击加减号修改文本框内容

        $(".increment").click(function() {
            var n = $(this).siblings(".digit").val()
            n++;

            $(this).siblings(".digit").val(n);
            // 3.计算小计的数值
            var p = $(this).parent().siblings(".price").html();
            p = p.substr(1);
            $(this).parent().siblings(".sum").html('￥' + (p * n).toFixed(2));


        })
        $(".decrement").click(function() {
            var n = $(this).siblings(".digit").val()
            if (n == 0) {
                return false
            } //文本框值为0时 数字不能继续减
            n--;
            $(this).siblings(".digit").val(n);
            // 3.计算小计的数值
            var p = $(this).parent().siblings(".price").html();
            p = p.substr(1);
            $(this).parent().siblings(".sum").html('￥' + (p * n).toFixed(2));

        })
        $(".digit").change(function() {
            var n = $(this).val();
            var p = $(this).parent().siblings(".price").html();
            p = p.substr(1);
            $(this).parent().siblings(".sum").html('￥' + (p * n).toFixed(2));
        })
    })
</script>

css样式

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        
        a {
            color: black;
            text-decoration: none;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .head {
            width: 1200px;
            height: 50px;
            background-color: rgba(187, 187, 187, 0.733);
            margin: 10px auto;
        }
        
        .head li {
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-right: 72px;
        }
        
        .head .good {
            margin-right: 240px;
        }
        
        .goods {
            position: relative;
            height: 160px;
            border-top: 2px solid rgb(122, 120, 120);
        }
        
        .goods .select {
            display: inline-block;
            position: absolute;
            left: 25px;
            top: 13px;
            width: 13px;
            height: 13px;
        }
        
        .food {
            position: absolute;
            left: 100px;
            height: 160px;
            width: 390px;
        }
        
        .food img {
            position: absolute;
            top: 20px;
            left: 20px;
            height: 110px;
            width: 100px;
            border: 1px solid rgb(143, 141, 141);
        }
        
        .food h3 {
            position: absolute;
            left: 135px;
            width: 255px;
            height: 160px;
            padding-top: 20px;
            font-size: 10px;
        }
        
        .food .price {
            position: absolute;
            top: 20px;
            left: 415px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        
        .food .num {
            position: absolute;
            left: 580px;
            top: 20px;
            width: 100px;
            height: 20px;
        }
        
        .decrement {
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid rgb(119, 117, 117);
        }
        
        .food .digit {
            position: absolute;
            top: 0;
            width: 60px;
            height: 20px;
            text-align: center;
            border: none;
            border-top: 1px solid rgb(119, 117, 117);
            border-bottom: 1px solid rgb(119, 117, 117);
            border-radius: 0px;
            outline: medium;
        }
        
        .increment {
            float: right;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid rgb(119, 117, 117);
        }
        
        .sum {
            position: absolute;
            top: 20px;
            left: 750px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>

小计值随着数量增加减少做出相应变化

码农公寓

相关文章