【jquery】實現購物車加減

sanqianjia發表於2020-11-30
jQuery

分析：
1.點選“+”或者“-”時當前兄弟文字框中的數值變化
2.文字框最小值為1，所以點選“-”時需要進行判斷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.6.2.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        .p-num1,
        .p-num2 {
            width: 170px;
            margin: 20px;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        a:hover {
            color: #e33333;
        }

        .decrement,
        .increment {
            float: left;
            border: 1px solid #cacbcb;
            height: 18px;
            line-height: 18px;
            padding: 1px 0;
            width: 16px;
            text-align: center;
            color: #666;
            margin: 0;
            background: #fff;
            margin-left: -1px;
        }

        .itxt {
            float: left;
            border: 1px solid #cacbcb;
            width: 42px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            padding: 1px;
            margin: 0;
            margin-left: -1px;
            font-size: 12px;
            font-family: verdana;
            color: #333;
            -webkit-appearance: none;
        }

        .p-sum {
            font-weight: 700;
            width: 145px;
        }

        .p-num {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="p-num">
        <div class="p-num1">
            <div class="quantity-form">
                <a href="javascript:;" class="decrement">-</a>
                <input type="text" class="itxt" value="1">
                <a href="javascript:;" class="increment">+</a>
            </div>
        </div>
        <div class="p-num2">
            <div class="quantity-form">
                <a href="javascript:;" class="decrement">-</a>
                <input type="text" class="itxt" value="1">
                <a href="javascript:;" class="increment">+</a>
            </div>
        </div>
    </div>
    <script>
        $(".increment").click(function () {
            //得到當前兄弟文字框的值
            var n = $(this).siblings(".itxt").val();
            n++;
            $(this).siblings(".itxt").val(n);
            
        })
        $(".decrement").click(function(){
            //得到當前兄弟文字框的值
            var n=$(this).siblings(".itxt").val();
            //當文字框的值減到1時就不再執行n--及後面的程式碼
            if(n==1){
                return false;
            }
            n--;
            $(this).siblings(".itxt").val(n);
        })
    </script>
</body>

</html>

效果：
在這裡插入圖片描述

相關文章