本文实例讲述了jQuery实现购物车计算价格功能的简易方法，做的比较简单，现分享给大家供大家参考。具体如下：

目的：

 <%@ page language="java" contentType="text/html; charset=utf-8"

     pageEncoding="utf-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>jQuery实现的购物车功能</title>

 <!-- 使用绝对路径引入 jQuery库文件 -->

 <script type="text/javascript"

     src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>

 <script type="text/javascript">

     $(function() {

         //根据类选择器，当点击 添加商品按钮的时候触发,为加号按钮注册click事件处理函数

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

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

             //每点击添加 按钮1次，商品数量加1

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

             //再调用计算商品总价方法

             setTotal();

         });

         //根据类选择器，当点击 减号 按钮的时候触发

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

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

             //每点击减少按钮1次，商品数量减1

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

             //当文本框的值为减少到小于等于1时候,取值1

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

                 t.val(0);

             }

             //再调用计算商品总价方法

             setTotal();

         });

         //计算总价格的函数

         function setTotal() {

             var s = 0;

             //each 遍历

             $("#tab td").each(

                     function() {

                     //find()方法 遍历input标签中的后代, class名为 text_box中 文本框 中的值，即：商品的数量，乘以商品的价格

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

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

                     });

             //将计算的结果通过 jQuery的 html()方法赋予给 总价，并通过 toFixed()进行取舍

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

         }

         //再调用计算商品总价方法

         setTotal();

     });

 </script>

 </head>

 <body>

     <table id="tab">

         <tr>

             <td><span>商品单价:</span><span class="price">2.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">7.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>

     </table>

     <p>

         总价:<label id="total"></label>（元）

     </p>

 </body>

 </html>

项目源码

实现在jsp界面修改购物车商品的件数，点击按钮可以实现商品数量的减少或者增加，并且能够实时的计算出总的商品价格。

实现思路：

文件中的代码实现了简单的购物车根据数量，计算总价的功能，源码可以直接导入运行，下面详细介绍一下它的实现过程。

1、引入jQuery的库文件

<!-- 使用绝对路径引入 jQuery库文件 -->

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>

2、编写一个 table，搭建主体内容

3、编写jQuery代码

①、$(function(){})，当文档结构完全加载完毕再去执行函数中的代码；
②、$(".add").click(function(){})，为加号按钮注册click事件处理函数；

③、点击加号按钮的时候执行的代码

④、var t=$(this).parent().find('input[class*=text_box]')，获取文本框，这个文本中显示的是要购买商品的数目；
⑤、t.val(parseInt(t.val())+1)，点击一次商品数量加1；
⑥、setTotal()，执行此函数可以计算出总的价格并且显示；
⑦、$(".min").click(function(){})，为减号按钮注册click事件处理函数；

⑧、计算总价格的函数

⑨、var s=0，声明一个变量，此变量用来存储总价格。
⑩、$("#tab td").each(function(){ 
  s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); 
}); 
可以遍历文本框并乘以单价，然后进行累加，最后计算出来的总价格。

4、运行效果展示：

以上是一个jQuery实现购物车计算价格功能的方法，写的比较简单，可以作为jQuery初学者的入门学习素材，以强化jQuery基本语法的学习。

jQuery实现购物车计算价格功能的方法的更多相关文章

  1. js购物车计算价格

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  2. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  3. Android中购物车的全选、反选、问题和计算价格

    此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...

  4. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

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

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  6. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  7. Django day 38 结算中心，支付中心，计算价格方法

    一:结算中心 二:支付中心 三:计算价格方法

  8. Jquery实现购物车物品数量的加减特效

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

  9. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

随机推荐

  1. Climbing Stairs 爬楼梯问题，每次可以走1或2步，爬上n层楼梯总方法 （变相fibonacci）

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  2. 获取所有后缀DDE打开命令

    概述: 由于需要使用DDE方式打开文件,所以把支持DDE方式打开文件的参数都导出来到文件,方便查找. 并且提供运行DDE命令的工具,可以用于测试DDE功能. 1.运行脚步GetDDE.vbs可以获取系 ...

  3. ShareSDK分享和SMS的使用

    使用的是第三方的Mob来实现分享和发送短信的Demo 如图是项目的结构,结合了分享,发送短信,读取短信内容的功能 代码地址:https://github.com/1825492258/MobShare ...

  4. IntelliJ Idea编译报错：javacTask: 源发行版 1.8 需要目标发行版 1.8

    解决办法: 1.Project Settings-Modules,选择项目,选择language level 8 2.选中项目,右击选择Maven-->Reimport, 再次编译. 3.Fil ...

  5. CPU硬件辅助虚拟化技术

    目前主要有Intel的VT-x和AMD的AMD-V这两种技术.其核心思想都是通过引入新的指令和运行模式,使VMM和Guest OS分别运行在不同模式(ROOT模式和非ROOT模式)下,且Guest O ...

  6. 为什么懂云的IT高手能过得比你好

    盼望着,盼望着,一年一度的国庆7天长假还有不到24小时就到来了.各个部门的同事都已准备好满世界旅行去了. IT 部门各位同事的心还是悬着,信息系统还要持续的运转,对外的网站不能停,假期的线上促销也不能 ...

  7. [翻译] TWRPickerSlider

    TWRPickerSlider https://github.com/chasseurmic/TWRPickerSlider Usage Add the dependency to your Podf ...

  8. [C++]auto_ptr绑定到指针

    接受指针的构造函数为explicit构造函数,所以必须使用初始化的直接形式来创建auto_ptr对象: auto_ptr<int> pi = new int(1024);//error a ...

  9. iframe加载方案及性能

    普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...

  10. PetaPoco轻量级ORM框架 - 对Database类的进行扩展，可以返回Table格式数据

    一.有时我们需要将常用的功能添加到PetaPoco中的Database类中 实现方式有2种,以下以查询字段为例 1.通过扩展方式实现,此方式不改变被调用(Database)类名(只能增加方法) pub ...