本文实例讲述了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. VS2010项目转换成VS2008

    声明:本篇文章不是本人原创,但是网站的地址没有记下来,所以不能贴出来.但此方法本人亲自验证有效. 一.将.sln文件中的 Microsoft Visual Studio Solution File, ...

  2. 文件路径太长无法删除 robocopy

    方法一:新建空文件夹 D:\temp robocopy D:\temp D:\target\source\test  /purge 或者在同一目录下,建一个空文件夹, test 在cmd下切换进入到当 ...

  3. Node服务端极速搭建 － nvmhome

    本文意在让你掌握极速搭建Node服务端(任何Project) $ whoami name: kelvin email: kelvv@outlook.com homepage: www.kelvv.co ...

  4. toLocaleTimeString()方法在IE和谷歌浏览器上 根据本地时间格式，把 Date 对象的时间部分(不含日期)转换为“时间字符串”存在区别

    这两天修改一个bug,发现一个问题:  toLocaleTimeString()方法在IE和谷歌浏览器上 根据本地时间格式,把 Date 对象的时间部分(不含日期)转换为“时间字符串”存在区别.方法原 ...

  5. 代码整洁之道读书笔记（Ch4-Ch7）

    这几章从注释.程序格式.对象与数据结构的规范以及错误处理四个方面介绍了如何使代码变得简洁易懂.不同于上次摘抄的方法,这一次我会结合第一次个人作业的代码进行分析. 第四章  注释 这一章告诉我们,好的注 ...

  6. PHPStorm/webstorm/PyCharm tips

    phpstorm对于使用PHP开发web的人员来说,是一个非常不错的编辑开发IDE,以前用过sublime,但是相比于storm,sublime在浏览legacy代码,类代码编辑方面明显要逊色不少.同 ...

  7. 一分钟在云端快速创建MySQL数据库实例

    本教程将帮助您了解如何使用Azure管理门户迅速创建,连接,配置MySQL 数据库 on Azure.完成本教程后,您将在Azure上拥有一个示例MySQL数据库服务器,并了解如何使用管理门户执行基本 ...

  8. Linux工具-nmon

    1.nmon下载地址:https://sourceforge.net/projects/nmon/files/ 创建文件nmon:# mkdir nmon 解压文件夹:# tar -zxvf nmon ...

  9. 机器学习之LinearRegression与Logistic Regression逻辑斯蒂回归(三)

    一 评价尺度 sklearn包含四种评价尺度 1 均方差(mean-squared-error) 2 平均绝对值误差(mean_absolute_error) 3 可释方差得分(explained_v ...

  10. ASP.NET Core 使用 SQLite 教程，EF SQLite教程，修改模型更新数据库，适合初学者看懂详细、简单教程

    SQLIte 操作方便,简单小巧,这里笔者就不再过多介绍,感兴趣可以到以下博文 https://blog.csdn.net/qq_31930499/article/details/80420246 文 ...