本文实例讲述了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. C语言——链式存储实现栈的基本运算算法

    Lkstack.h // 链栈的定义 typedef struct node { int data; struct node *next; }LkStk; main.c #include <st ...

  2. GDAL2.0编译——32位和64位

    准备工作: Source下载,这里下载对应的GDAL版本 https://trac.osgeo.org/gdal/wiki/DownloadSource 懒得编译也可以在这里下载对应版本 https: ...

  3. Phoenix 映射 HBase + Maven

    声明 本文基于 Centos6.x + CDH5.x 什么是Phoenix Phoenix的团队用了一句话概括Phoenix:"We put the SQL back in NoSQL&qu ...

  4. 沉淀再出发:Bean,JavaBean,POJO,VO,PO,EJB等名词的异同

    沉淀再出发:Bean,JavaBean,POJO,VO,PO,EJB等名词的异同 一.前言 想必大家都有这样的困惑,接触的东西越多却越来越混乱了,这个时候就要进行对比和深入的探讨了,抓住每一个概念背后 ...

  5. 整合VIM和Graphviz，并且使用本办法实现实时预览

    在编程或是整理知识的时候一直苦于没有一款可以帮助理清思路的工具. 在网上苦寻良久,终于找到了一款可心可意的小软件 —— Graphviz. 折腾了一番,终于可以凑合着用了. 现将折腾的成果记录于此以作 ...

  6. January 06 2017 Week 1st Friday

    Victory won't come to me unless I go to it. 胜利是不会向我走来的,我必须自己走向胜利. I wish I can walk from one victory ...

  7. 第一次课堂作业之Circle

    1.问题描述: Create a program that asks for the radius of a circle and prints the area of that circle, us ...

  8. scala当中的类型参数

    类型参数主要就是研究scala当中的类或者scala当中的方法的泛型 1.scala当中的类的泛型         object Demo8 {          def main(args: Arr ...

  9. jQueryeasyUI+Hibernate+struts2实现商城后台管理之添加操作时的unique验证

    1. 在admin.js中添加扩展验证的操作checkName var checkUrl = "./hytc/AdminAction_check.action";

  10. js 调用 oc 的解释

    JavaScriptCore NSInvocation js解释器在解释函数调用时,会在执行环境进行函数搜索,主调者类型判定: 如果是js调用,直接解释执行: 如果是oc调用,则将调用打包成NSInv ...