jQuery实现的购物车物品数量加减功能代码

本文实例讲述了jQuery实现的购物车物品数量加减功能。分享给大家供大家参考，具体如下：

今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我，我后来帮她解决了这个Jquery特效，现在把它整理出来分享给大家用，虽然功能比较简单，但是很实用。

主要包括了以下功能：

1、数量增加操作功能

2、数量减少操作功能

3、总价计算功能

4、自动判断数量到1的时候，减少操作按钮禁止点击，数量增加时自动恢复

5、保留小数点位数toFixed()函数非常实用

功能代码如下：

$(function(){
//获得文本框对象
var t = $("#text_box");
//数量增加操作
$("#add").click(function(){
t.val(parseInt(t.val())+1)
if (parseInt(t.val())!=1){
$('#min').attr('disabled',false);
}
setTotal();
})
//数量减少操作
$("#min").click(function(){
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==1){
$('#min').attr('disabled',true);
}
setTotal();
})
//计算操作
function setTotal(){
$("#total").html((parseInt(t.val())*3.95).toFixed(2));//toFixed()是保留小数点的函数很实用哦
}
//初始化
setTotal();
})

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现数字加减效果汇总

    我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数. 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单. 复制代码 代码如下: <input type="text" class="spinner"/> 调用也非常简单,

  • jquery实现文本框数量加减功能的例子分享

    jquery实现文本框数量加减功能的例子分享

    下面是使用jquery实现的代码. 效果图: 源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>

  • jQuery实现购物车数字加减效果

    我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法. 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单,请看演示示例1. 复制代码 代码如下: <input type="text

  • jQuery实现购物车多物品数量的加减+总价计算

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现购物

  • jQuery快速实现商品数量加减的方法

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!-- 快速实现数量加减 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(docu

  • jQuery实现的购物车物品数量加减功能代码

    本文实例讲述了jQuery实现的购物车物品数量加减功能.分享给大家供大家参考,具体如下: 今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: 1.数量增加操作功能 2.数量减少操作功能 3.总价计算功能 4.自动判断数量到1的时候,减少操作按钮禁止点击,数量增加时自动恢复 5.保留小数点位数toFixed()函数非常实用 功能代码如下: $(func

  • jQuery实现表单动态加减、ajax表单提交功能

    对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了.现在我了解的一些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs,前两个还是目前的主流趋势.第二种就是基于市面上的一些非主流工具包,比如BUI,FLatUI等,再结合自己的dom操作. 好了,废话不多说了,本篇文章主要讲怎么去实现表单动态加减的效果,花了一天时间搞出来,特来分享一下.本文主要分为两部分: 一是页面表单

  • Android 购物车加减功能的实现代码

    Android 实现购物车加减功能,效果图如下所示: public class adderView extends LinearLayout implements View.OnClickListener, TextWatcher { private int amount = 0; //购买数量 private int goods_storage = Integer.MAX_VALUE; //商品库存 private OnAmountChangeListener mListener; priva

  • 微信小程序外卖选购页实现切换分类与数量加减功能案例

    微信小程序外卖选购页实现切换分类与数量加减功能案例

    本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能.分享给大家供大家参考,具体如下: 关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤: 效果图 实现以下功能 一. 点击分类项,切换右边的食品,并高亮自身 这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可. categoryStates = categoryStates.map(function (item, i) { if (index == i) { i

  • vue数据操作之点击事件实现num加减功能示例

    vue数据操作之点击事件实现num加减功能示例

    本文实例讲述了vue数据操作之点击事件实现num加减功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue num加减</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></scrip

  • vue中子组件向父组件传递数据的实例代码(实现加减功能)

    这里讲解一下子组件向父组件传递值的常用方式. 这里通过一个加减法的实例向大家说明一下,这个的原理. 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值是减一变成 0 具体代码我直接贴出来,刚出炉的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

  • 基于jQuery实现仿QQ空间送礼物功能代码

    基于jQuery实现仿QQ空间送礼物功能代码

    我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人.我们只要把鼠标放到如下图的生日快乐那标签上,就会显示可以给该人送的礼物!! 如下图所示: 单击其中的一个礼物,就会马上送出去.但是我们现在是要说的还有单击更多的时候,会另外弹出一个新的窗口在当前页面最前面!如下图显示: 怎么实现那上面的功能呢? 就是把鼠标放上去,弹出一天tips,单击tips里面的控件,之后弹出另外一个弹出框. 网上就会有很多比较好的插件,就先到网上去找了相对应的jquery插件. jquery中tips的有很多插件,

随机推荐