今天coding的时候,写购物车,遇到了一个小小的麻烦,开始时候我是这样写的加减号那里的
(只写主要代码,样式不写了)
<li><span class="decs">-</span>1<span class="incs">+</span><li>
当写jQuery的时候就出现了问题,
// 减少的代码
$('.decs').click(function() {
var num = $(this).parent('li').text();
num = parseInt(num);
// 因为获得的num不只有数字,还有前边的“-”号
num = 0 - num;
if(num > 1){
$(this).parent('li').html('<span class="decs">-</span>'+ (num - 1)
+ '<span class="incs">+</span>');
}
else {
alert('亲,不能再少了!');
}
});
(增加的类似,就不写了)
当测试的时候,发现只可以执行一次,怎么都弄不明白为啥。后来改了一种写法:
<li><span class="decs">-</span><span>1</span><span class="incs">+</span><li>
$('.decs').click(function() {
var num = $(this).next('span').text();
num = parseInt(num);
if(num > 1){
$(this).next('span').text(num - 1);
}
else {
alert('亲,不能再少了!');
}
});
这样写代码又简洁还可以实现功能!
这让我发现,HTML的结构很重要,如果结构写的好,可以省好多事。同时,也给了我另一个思路,就是在当前情况无法解决问题的时候,可以试着从别的地方找突破点!
大家一起努力学习呀!
分享到:
相关推荐
27 Flutter仿京东商城项目 购物车之 实现数量加减 以及获取加入购物车的数据29分13秒.rar
29 Flutter仿京东商城项目 购物车之 购物车数量加减 全选 反选(25分53秒).rar
一个网上商城项目,基本上的功能都有 主要实现用户网上购物。
jQuery购物车自动计算金额表单多数据加减商城购物结算
在电子商务网站购物时,选择了一个商品后,一般购物车都有一个可以调整购买数量的位置,形如“- 1+”,点击加号,增加购买数量,点击减号,减少购买数量或清空购物车。通过JavaScript原生代码,可以很简单地实现此...
jQuery购物车加减功能插件,适合商城加减购物产品
这是一款jquery数字加减输入框插件。该插件兼容bootstrap框架,可以将普通的input转换为类似商城购物车中的数量加减器效果。
类似淘宝购物车,可以加减数量、输入数量,保存数量到本地。
一款实用的电子商务网站购物车结算特效,jQuery仿淘宝商城购物车结算界面代码。可以删除商品,加减商品数量自动计算总额等。
Android商城购物车功能的实现,主要实现了单选、全选,金额合计,商品删除,商品数量加减等功能。
功能: 商品的分类展示,用户的注册登录,购物车,订单结算, 购物车加减,后台商品管理,分类管理,订单管理等等功 能。 二、项目运行 环境配置: Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,...
我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --&...
最近公司项目做商城模块,需要实现购物车功能,主要实现了单选、全选,金额合计,商品删除,商品数量加减等功能,先看看效果图: 在这里插入图片描述 一、实现步骤: 0、添加依赖库 1.购物车主界面布局文件...
该文件主要是以vue。js为主的商城购物页面渲染以及交互,商品选择、数量加减、总价格。总数量、等功能
购物车显示功能,旗舰版与其他版本不同,本版支持购物车即时显示,无论顾客在商城的哪个页面,都实时显示购物车信息,如订购商品数量、订单总金额等,并可直接进入购物车增减商品,同时自动判断用户状态,并及时...
在做商城项目的时候,需要在购物车中增加一个商品加减功能,并在加减时同时修改总价格的显示,并且保证文本框text只能输入纯数字
实现效果: 原生js仿淘宝购物车页面,通过原生js实现淘宝购物车的效果,点击加减,数量的变化以及总价的变化,非常适合一些电商网站或者大型商城,php中文网推荐下载!
购物车数量加减 右加号 $(.jiahao).click(function() { var t = $(this).siblings().find(input);//取到数量 t.val(parseInt(t.val()) + 1);//parseInt()解析input一个字符串,返回一个整数 heji();//调用后面计算...
商品详情页开发单选属性、数量加减、剩余件数、加入购物车、加入成功弹窗等功能;团购页活动剩余时间倒计时效果, 可显示商品的折扣,购买人数以及剩余时间和商品详情。购物流程一目了然,其他页面新增多种jquery...