本文实例讲述了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. Cloudera Manager5及CDH5在线（cloudera-manager-installer.bin）安装详细文档

    问题导读:1.Cloudera Manager5如何使用cloudera-manager-installer.bin安装?2.Cloudera Manager5安装被中断该如何继续安装?还是重新安装? ...

  2. AndroidStudio项目打包成jar

    AndroidStudio项目打包成jar 前言:在eclipse中我们知道如何将一个项目导出为jar包,现在普遍AndroidStuido开发,这里一步一步详加介绍AS项目打包成jar,jar和ar ...

  3. jQuery实现动态选中select

    // jquery实现动态选中select var active = $('.all_sla_title1 .active') var group_name = active.html(); var ...

  4. firewall 如何开放端口

    转自官方网页:http://www.firewalld.org/documentation/howto/open-a-port-or-service.html How to open port 80/ ...

  5. awk单行脚本快速参考

    AWK单行脚本快速参考 2008年4月28日编辑: Eric Pement eric [at] pement.org 版本 0.26翻译: 董一粟 yisudong [at] gmail.com 最新 ...

  6. EasingAnimation

    EasingAnimation https://github.com/YouXianMing/EasingAnimation This class is used for Easing animati ...

  7. 编写VBA宏生成页面

    概述 依据详细设计中表设计,借用excel宏编写VBA生成页面. 特色 高定制.高效率.兼容所有生成要求.不依赖低耦合.任意Sheet适用 缺陷 不支持批量Sheet页生成 VBA源码 Sub lis ...

  8. laravel controller重写

    <?php namespace Boss\Http\Controllers; use Illuminate\Foundation\Bus\DispatchesJobs; use Illumina ...

  9. Samba文件共享服务器配置

    Samba起源: 早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序:NFS ...

  10. Activator 通过SSH解锁屏幕等手势操作

    来源:https://qunwang6.github.io/blog/Activator/ Activator 发表于 2015-10-24   |   分类于 iOS Activator Activ ...