脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。