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.each()用法分享
Jul 31 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 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
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python图片验证码生成代码
2016/07/02 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
企业理念标语
2014/06/09 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
自我检讨书范文
2015/01/28 职场文书
检讨书模板
2015/01/29 职场文书
创业计划书之熟食店
2019/10/16 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
python 管理系统实现mysql交互的示例代码
2021/12/06 Python