JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)


Posted in Javascript onJanuary 13, 2015

购物车点击可以减少或者添加商品并自动计算价格:

购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(function(){ 

  $(".add").click(function(){ 

    var t=$(this).parent().find('input[class*=text_box]'); 

    t.val(parseInt(t.val())+1) 

    setTotal(); 

  }) 

  $(".min").click(function(){ 

    var t=$(this).parent().find('input[class*=text_box]'); 

    t.val(parseInt(t.val())-1) 

    if(parseInt(t.val())<0){ 

      t.val(0); 

    } 

    setTotal(); 

  }) 

  function setTotal(){ 

    var s=0; 

    $("#tab td").each(function(){ 

      s+=parseInt($(this).find('input[class*=text_box]').val())

   *parseFloat($(this).find('span[class*=price]').text()); 

    }); 

    $("#total").html(s.toFixed(2)); 

  } 

  setTotal();

}) 

</script>

</head>

<body>

<table id="tab">

  <tr>

    <td>

      <span>单价:</span><span class="price">1.50</span>

      <input class="min" name="" type="button" value="-" />

      <input class="text_box" name="" type="text" value="1" />

      <input class="add" name="" type="button" value="+" /></td>

  </tr>

  <tr>

    <td>

      <span>单价:</span><span class="price">3.95</span>

      <input class="min" name="" type="button" value="-" />

      <input class="text_box" name="" type="text" value="1" />

      <input class="add" name="" type="button" value="+" /></td>

  </tr>

</table>

<p>总价:<label id="total"></label></p>

</body>

</html>

上面的代码实现了简单的购物车功能,下面详细介绍一下它的实现过程。

代码注释:

1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.$(".add").click(function(){}),为加号按钮注册click事件处理函数。
3.var t=$(this).parent().find('input[class*=text_box]'),获取文本框,这个文本中显示的是要购买商品的数目。
4.t.val(parseInt(t.val())+1),点击一次商品数量加1。
5.setTotal(),执行此函数可以计算出总的价格并且显示。
6.$(".min").click(function(){}),为减号按钮注册click事件处理函数。
7.function setTotal(){},此函数可以计算出总价格并且显示出来。
8.var s=0,声明一个变量,此变量用来存储总价格。
9.$("#tab td").each(function(){
  s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
});
可以遍历文本框并乘以单价,然后进行累加,最后计算出来的总价格。

Javascript 相关文章推荐
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
jquery删除指定子元素代码实例
Jan 13 #Javascript
JavaScript删除指定子元素代码实例
Jan 13 #Javascript
JS长整型精度问题实例分析
Jan 13 #Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 #Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 #Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 #Javascript
javascript面向对象之this关键词用法分析
Jan 13 #Javascript
You might like
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php session 写入数据库
2016/02/13 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
在centos7中分布式部署pyspider
2017/05/03 Python
高效使用Python字典的清单
2018/04/04 Python
python使用配置文件过程详解
2019/12/28 Python
python入门之井字棋小游戏
2020/03/05 Python
详细分析Python collections工具库
2020/07/16 Python
浅谈python 类方法/静态方法
2020/09/18 Python
详解Python中的文件操作
2021/01/14 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
债务追讨授权委托书范本
2014/10/16 职场文书
倡议书怎么写?
2019/04/11 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python