jQuery-购物车加减数量

最新推荐文章于 2023-04-22 09:41:13 发布

前端笨鸟

最新推荐文章于 2023-04-22 09:41:13 发布

阅读量786

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41670147/article/details/103473498

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .box {
            border: red solid 1px;
            height: 40px;
            width: 200px;
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
        }
        
        .box input {
            width: 40px;
            text-align: center;
        }
        
        #money {
            border: none;
            text-align: left;
            margin-left: 2px;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            display: block;
            float: left;
        }
    </style>

</head>

<body>
    <ul class="box">
        <li><button type="button" class="subtract" disabled>-</button></li>
        <li><input type="text" class="text" value="1" /></li>
        <li><button type="button" class="plus">+</button></li>
        <li class="money">单价：¥12.80</li>
        <li class="sum">小计：¥12.80</li>
    </ul>
    <ul class="box">
        <li><button type="button" class="subtract" disabled>-</button></li>
        <li><input type="text" class="text" value="1" /></li>
        <li><button type="button" class="plus">+</button></li>
        <li class="money">单价：¥12.80</li>
        <li class="sum">小计：¥12.80</li>

    </ul>
    <ul class="box">
        <li><button type="button" class="subtract" disabled>-</button></li>
        <li><input type="text" class="text" value="1" /></li>
        <li><button type="button" class="plus">+</button></li>
        <li class="money">单价：¥12.80</li>
        <li class="sum">小计：¥12.80</li>
    </ul>
    <script>
        $(function() {
        	//加数量
            $(".plus").click(function() {
                var n = $(this).parents().siblings("li").children(".text").val();
                //console.log(n);
                n++;
                $(this).parents().siblings("li").children(".text").val(n)
                $(this).parents().siblings("li").children(".subtract").removeAttr("disabled")


                var p = $(this).parents("li").siblings(".money").html();
                p = p.substr(4);
                // console.log(p);

                $(this).parents("li").siblings(".sum").html("小计：¥" + (n * p).toFixed(2));

            });
            //减数量
            $(".subtract").click(function() {
                var n = $(this).parents().siblings("li").children(".text").val();
                //console.log(n);
                n--
                if (n == 1) {
                    $(this).attr("disabled", "disabled");
                } else if (n == 0) {
                    return false;
                }
                // if (n == 0 || n == 1) {
                //     return n == 1 && $(this).attr('disabled', 'disabled')
                // }
                $(this).parents().siblings("li").children(".text").val(n)
                var p = $(this).parents("li").siblings(".money").html();
                p = p.substr(4);
                // console.log(p);

                $(this).parents("li").siblings(".sum").html("小计：¥" + (n * p).toFixed(2));

            })
            //用户直接修改数量
            $(".text").change(function() {
                var n = $(this).val();
                var p = $(this).parents("li").siblings(".money").html();
                p = p.substr(4);
                // console.log(p);

                $(this).parents("li").siblings(".sum").html("小计：¥" + (n * p).toFixed(2));
                if (n != 1) {
                    $(this).parents().siblings("li").children(".subtract").removeAttr("disabled")
                }
            })
        })
    </script>
</body>

</html>

在这里插入图片描述

前端笨鸟

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery-购物车加减数量

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="jquery-3.4.1.min.js"></script> <style> ...
复制链接

扫一扫