`
flj643213995
  • 浏览: 13102 次
  • 性别: Icon_minigender_2
  • 来自: 长沙
社区版块
存档分类
最新评论

商城购物车的加减号控制商品数量

阅读更多
今天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

    在本项目中,我们主要探讨的是如何使用Flutter框架来构建一个仿京东商城的购物车功能,特别是关于商品数量的加减以及如何获取并处理加入购物车的数据。Flutter是一款由Google开发的开源UI工具包,它允许开发者快速地...

    29 Flutter仿京东商城项目 购物车之 购物车数量加减 全选 反选(25分53秒).rar

    在本教程中,我们将深入探讨如何使用Flutter框架构建一个类似京东商城的购物车功能,包括购物车中的商品数量加减、全选与反选操作。这个项目是针对移动应用开发的,Flutter作为Google推出的跨平台UI工具包,以其高效...

    ecshop 购物车加减插件

    购物车加减插件主要负责在商品详情页和购物车页面上添加数量调整的按钮,用户可以通过点击“+”和“-”按钮来增加或减少商品数量,而无需离开当前页面。这样的设计不仅方便了用户操作,也提高了购物流程的效率。 **...

    Android-使用kotlin开发的数量控制控件一般用于商城类app加减商品数量

    本教程将深入探讨如何使用Kotlin语言来开发这样一个数量控制控件,以实现用户能够轻松增加或减少购物车中商品的数量。 首先,我们需要创建一个新的`QuantityControlView`类,它将继承自Android的`LinearLayout`或者...

    JSP 网上商城 购物车

    【JSP网上商城购物车】项目是一个基于JSP技术实现的电子商务平台,旨在提供全面的在线购物体验。这个项目的核心是构建一个用户友好的界面,让用户能够方便地浏览商品、添加到购物车、进行结算,并完成整个购物流程。...

    jQuery购物车自动计算金额表单多数据加减商城购物结算

    在这个主题中,"jQuery购物车自动计算金额表单多数据加减商城购物结算"涉及到的核心知识点主要包括jQuery库的使用、动态计算、表单处理以及多数据管理。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM...

    jQuery仿购物商城商品数量加减代码

    为了提供良好的用户体验,一种常见的做法是使用动态的加减按钮来控制购物车中商品的数量。本篇文章将深入解析一款基于jQuery实现的购物商城商品数量加减功能的代码。 首先,我们需要理解jQuery库的基本概念。jQuery...

    jQuery仿购物商城商品数量加减代码.zip

    《jQuery仿购物商城商品数量加减代码解析与实践》 在网页开发中,购物商城的商品数量加减功能是一项常见的交互设计,它使用户能够轻松地调整购买商品的数量。本篇文章将详细解读“jQuery仿购物商城商品数量加减代码...

    商城购物车JS+JQUERY特效

    2. **数量调整**:用户可以通过加减按钮改变购物车内商品的数量,JS+jQuery可以确保这一过程无刷新且流畅,同时同步更新总价。 3. **商品移除**:当用户决定移除购物车中的某项商品,JavaScript会移除对应的DOM元素...

    小米购物车的实现代码

    3. **数量增减**:用户可以通过加减按钮改变商品数量,JavaScript会实时计算总价并更新显示。 4. **计算总价**:JavaScript可以遍历存储的商品,根据数量和单价计算购物车的总金额,显示在页面上。 5. **选中/取消...

    基于JavaScript的产品购物车数量加减+-(调试通过)

    在电子商务网站购物时,选择了一个商品后,一般购物车都有一个可以调整购买数量的位置,形如“- 1+”,点击加号,增加购买数量,点击减号,减少购买数量或清空购物车。通过JavaScript原生代码,可以很简单地实现此...

    商城购物车(开发工具:AndroidStudio)

    5. **UI设计**: 使用XML布局文件来定义界面元素,如按钮(用于加减数量)、EditText(输入数量)以及可能的ImageView(显示商品图片)。同时,需要考虑响应式设计,确保界面在不同设备上都能正常显示。 6. **事件...

    购物车加减功能键插件

    购物车加减功能键插件是电商网站中常见的一种交互元素,主要负责用户在选择商品时对数量的增减操作,提升购物体验。这个插件适用于各种在线商城系统,能够帮助用户快速调整购物车中商品的数量,从而实现更加便捷的...

    iOS购物车联动demo

    UICollectionView的每个单元格(UICollectionViewCell)代表一个商品,用户可以通过点击加减按钮来更改商品数量。为了实现这个功能,我们需要在Cell中添加手势识别器,并在Cell的代码中处理点击事件,然后通知...

    购购物车,网上商城静态页面

    6. 加减数量与移除商品:购物车页面应允许用户增加或减少商品数量,甚至完全移除某个商品。这需要JavaScript事件监听和处理,如点击按钮触发相应操作。 7. 计算总价:购物车页面需要实时计算用户所选商品的总价,这...

    购物车功能实现

    本文将深入探讨如何实现一个具备单选、全选、金额合计、商品删除以及商品数量加减功能的Android商城购物车。 首先,我们需要创建一个数据模型来存储商品信息。这个数据模型通常包含商品ID、商品名称、单价、数量、...

    简约式图文商品挑选结算微商城购物车程序源码.zip

    该压缩包文件“简约式图文商品挑选结算微商城购物车程序源码.zip”包含了一个用于构建微商城购物车系统的源代码。微商城购物车程序是电商应用中的关键组成部分,它允许用户浏览、选择并结算商品。以下是这个系统可能...

    Android 自定义加减选择器(适用于商城购物)

    "Android 自定义加减选择器(适用于商城购物)"就是一个典型的例子,它用于电子商城中商品数量的增减操作,用户可以通过点击加减按钮或者直接输入数字来调整购物车中的商品数量。这个自定义控件不仅提升了交互的便捷...

    购物车 静态页面 含javascript

    2. **数量控制**:在每个商品项旁边通常会有加减按钮,让用户调整商品数量。JavaScript监听这些按钮的点击事件,修改对应商品的数量并实时更新总价。 3. **总价计算**:购物车页面需要实时计算总价,这可以通过遍历...

    Java项目:嘟嘟网上商城系统(java+jdbc+jsp+mysql+ajax)

    功能: 商品的分类展示,用户的注册登录,购物车,订单结算, 购物车加减,后台商品管理,分类管理,订单管理等等功 能。 二、项目运行 环境配置: Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,...

Global site tag (gtag.js) - Google Analytics