欢迎来到
银狐的个人博客

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(jQuery:增减商品数量及修改商品总价分析 第1张图片-银狐博客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)保留两位小数 jQuery:增减商品数量及修改商品总价分析 第2张图片-银狐博客       })

PS:别忘了导入jquery

赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《jQuery:增减商品数量及修改商品总价分析》
文章链接:https://www.yinhu3.com/2590.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
如果文章侵犯到你的权益,请查看本站免责声明:《免责声明》

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

愿意请我喝杯矿泉水吗

支付宝扫一扫打赏