jQuery购物车商品数量加减和小计

整体代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.body{width: 300px;height: 100px;border: 1px solid silver;}a{text-decoration: none;}.decrement,.increment{width: 10px;height: 10px;border: 1px solid silver;color: black;}.text{width: 50px;}</style></head><body><div class="mainbox"><div class="body"><div class="price">$24.80</div><div class="num"><a href="javascript:;" class="decrement">-</a><input type="text" class="text" value="1" /><a href="javascript:;" class="increment">+</a></div><div class="sum">$24.80</div></div><div class="body"><div class="price">$14.80</div><div class="num"><a href="javascript:;" class="decrement">-</a><input type="text" class="text" value="1" /><a href="javascript:;" class="increment">+</a></div><div class="sum">$14.80</div></div><div class="body"><div class="price">$8.80</div><div class="num"><a href="javascript:;" class="decrement">-</a><input type="text" class="text" value="1" /><a href="javascript:;" class="increment">+</a></div><div class="sum">$8.80</div></div></div><script src="../jQuery-code/jQuery.js"></script><script>$(".increment").click(function(){var num = $(this).siblings(".text").val();num++;  //商品数量$(this).siblings(".text").val(num);console.log();//小计模块var price =  $(this).parents(".num").siblings(".price").text().substr(1);var sum = (num * price).toFixed(2);$(this).parent().siblings(".sum").text('$' + sum);})$(".decrement").click(function(){var num = $(this).siblings(".text").val();if(num == 1){return false;}num--;$(this).siblings(".text").val(num);//小计模块var price =  $(this).parents(".num").siblings(".price").text().substr(1);var sum = (num * price).toFixed(2);$(this).parent().siblings(".sum").text('$' + sum);})$(".text").change(function(){var num = $(this).val();var price = $(this).parent().siblings(".price").text().substr(1);var sum = (num * price).toFixed(2);$(this).parent().siblings(".sum").text('$' + sum);})</script></body>
</html>

整体样式：

思路讲解：

商品数量增减

1.点击 - 数量减1 + 数量加1 数量最少是1

2.创建点击事件 .click()

3.声明一个变量赋值是文本框的值 .val()

4.点击 + 变量自增然后赋值给文本框

商品小计

1.在当前点击事件下继续写商品的单价 x 数量 = 小计

2. 获取单价注意要是当前 + 的商品的单价去掉$号用分割字符串 .substr(x)

.parent() 获取亲父亲元素

.siblings(" ") 兄弟元素

.parents(" ") 可以获取祖先元素

3.保留x位小数 .toFixed(x)

4.当修改文本框的值时重新计算小计 .change()事件

jQuery购物车商品数量加减和小计相关推荐

php购物车数量加减代码,js实现购物车商品数量加减
本文实例为大家分享了js实现购物车商品数量加减的具体代码,供大家参考,具体内容如下 Html - + CSS .list a { display: block; margin: 30px; paddi ...
android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
SpringBoot-项目4-购物车(添加入购物车，购物车列表，购物车商品数量加减操作)
64. 购物车-创建数据表 # 注意:没有添加相应的not null约束 CREATE TABLE t_cart (cid INT AUTO_INCREMENT COMMENT '购物车数据id',u ...
php购物车数量加减代码,购物车商品数量加减效果
Insert title here $(function(){ $(".add").on("click", function(){ // 先找到当前加号的父元素 ...
在axure中实现商品数量加减效果，原型库网站讲师-金乌解答同学问
有同学在群里提问,如何使用axure制作商品数量增加减少效果,见GIF图. 虽然属于初级教程,但很多同学还是小白新手阶段,所以特地录制了详细的视频讲解,供大家学习参考! 该教程由原型库网站录制http ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
自己动手丰衣足食之 jQuery 数量加减插件
引言做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...
jQuery实现购物车物品数量的加减
代码: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
VUE-17 图片的获取，购物车商品数量的添加与减少，计算整个购物车商品的价格（循环）
本节:将图片从服务器调用到页面上,购物车数量的增加与减少,计算整个购物车商品的价格(循环). 1.div 2.script:定义你要使用到的数组:计算整个购物车商品的价钱:购物车商品的数量增加和减少: ...

jQuery购物车商品数量加减和小计

jQuery购物车商品数量加减和小计相关推荐

最新文章

热门文章

jQuery购物车 商品数量加减和小计

jQuery购物车 商品数量加减和小计相关推荐

最新文章

热门文章

jQuery购物车商品数量加减和小计

jQuery购物车商品数量加减和小计相关推荐