本文实例讲述了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. 基础架构之spring cloud基础架构

    这篇文章是给公司设计的微服务基础架构,包括架构设计.部署流程.部署架构.开发Tip等等.这里分享出来,如果对看官们有点用,我就非常的高兴了. 首页 2. 架构设计 3. 部署流程 4. 部署架构 5. ...

  2. 基于PMBOK的项目管理知识体系

  3. centos7安装lua语言环境

    Linux 上安装 Lua 安装非常简单,只需要下载源码包并在终端解压编译即可. 官网地址:http://www.lua.org/download.html 我这里安装的是:lua-5.3.0.tar ...

  4. CentOS 7 yum 安装 Nginx

    1.添加Nginx到YUM源 添加CentOS 7 Nginx yum资源库,打开终端,使用以下命令: sudo rpm -Uvh http://nginx.org/packages/centos/7 ...

  5. yum 安装LAMP

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  6. Vscode rg.exe cpu 占用过高

    文件-> 首选项 -> 设置 -> 搜索search.followSymlinks 或者 修改settings.json 添加 "search.followSymlinks ...

  7. 沉淀再出发:用python画各种图表

    沉淀再出发:用python画各种图表 一.前言 最近需要用python来做一些统计和画图,因此做一些笔记. 二.python画各种图表 2.1.使用turtle来画图 import turtle as ...

  8. Apache Spark : Introduction

    看了一点<数据算法:Hadoop/Spark大数据处理技巧>,觉得有必要了解一下 Spark . 以上. Spark was introduced by Apache Software F ...

  9. 关闭window端口445

    首先,来查看下系统当前都开放了什么端口,怎样查看呢?调出cmd命令行程序,输入命令”netstat -na“,可以看到. 接着,可以发现当前系统开放了135.445以及5357端口,而且从状态看都处于 ...

  10. 0-创建scott数据

    CREATE TABLE dept (  deptno INT PRIMARY KEY,  dname VARCHAR(14),  loc VARCHAR(13) );   INSERT INTO d ...