jQuery：增減商品數量及修改商品總價分析

增減商品數量分析：
1.核心思路：首先宣告一個變數，當我們點擊+號(increment)，就讓這個值++，然后賦給文本框
2.注意1：只能增加本商品的數量，就是當前+號的兄弟文本框(count)的值
3.修改表單的值是val()方法
4.注意2：這個變數初始值應該是這個文本框的值，在這個值的基礎上++， 要獲取表單的值

修改商品總價分析：
1.核心思路：每次點擊+號或者-號，根據文本框的值乘以當前商品的價格 就是商品的小計
2.注意1：只能增加本商品的總價，就是當前商品的總價模塊
3.修改普通元素的內容是text()方法
4.注意2：當前商品的價格，要把￥符號去掉再相乘   截取字串substr(1)
5.用戶修改文本框的值 計算 總價模塊

 html  

 <div>
        <div class="quantityForm">
            <a href="javascript:;" class="decrement">-</a>
            <input type="text" class="count" value="1">
            <a href="javascript:;" class="increment">+</a>
        </div>
        <div class="price">單價：<span>￥8.80</span></div>
        <div class="prices">總價：<span>￥8.80</span></div>
 </div>

css

        .quantityForm {
            width: 68px;
            display: flex;
            text-align: center;
            margin: 20px 5px;
        }
        
        a {
            display: block;
            width: 20px;
            border: 1px solid #333;
            text-decoration: none;
            color: #666;
        }
        
        .count {
            width: 25px;
            text-align: center;
            border: none;
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
            color: #333;
        }

javascript

        //+號
        $('.increment').click(function() {
            //得到當前兄弟文本框的值
            var n = $(this).siblings('.count').val();
            // console.log(n);
            n++;
            $(this).siblings('.count').val(n);

            //計算總價模塊 根據文本框的值 乘以 當前商品的價格  就是  商品的總價
            //獲取當前商品價格p
            var p = $(this).parent().siblings('.price').children().html();
            // console.log(p);
            p = p.substr(1);
            //總價模塊
            $(this).parent().siblings('.prices').children().html('￥' + (p * n).toFixed(2)); //toFixed(2)保留兩位小數
        });
        //-號
        $('.decrement').click(function() {
            //得到當前兄弟文本框的值
            var n = $(this).siblings('.count').val();
            // console.log(n);
            n = --n >= 1 ? n : 1; //設定邊界值  這里用--n可以立即獲得回傳值
            // if (n == 1) return false;//程式結束
            // n--;
            console.log(n);
            $(this).siblings('.count').val(n);

            //計算總價模塊 根據文本框的值 乘以 當前商品的價格  就是  商品的總價
            //獲取當前商品價格p
            var p = $(this).parent().siblings('.price').children().html();
            // console.log(p);
            p = p.substr(1);
            //總價模塊
            $(this).parent().siblings('.prices').children().html('￥' + (p * n).toFixed(2)); //toFixed(2)保留兩位小數
        })

        //用戶修改文本框的值  計算總價
        $('.count').change(function() {
            //先得到文本框的值 
            var n = $(this).val();
            //再獲取商品單價
            var p = $(this).parent().siblings('.price').children().html();
            //截取數字
            p = p.substr(1);
            //總價模塊
            $(this).parent().siblings('.prices').children().html('￥' + (p * n).toFixed(2)); //toFixed(2)保留兩位小數
        })

PS：別忘了匯入jquery包