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;
        }

js

        //+号
        $('.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)保留两位小数
        })