jQuery:增减商品数量及修改商品总价分析

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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包

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery:增减商品数量及修改商品总价分析全部内容,希望文章能够帮你解决jQuery:增减商品数量及修改商品总价分析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: