jQuery實現購物車計算價格功能的方法

来源:https://www.cnblogs.com/2018-fyj/archive/2018/03/25/8646257.html
-Advertisement-
Play Games

本文實例講述了jQuery實現購物車計算價格功能的簡易方法,做的比較簡單,現分享給大家供大家參考。具體如下: 目的: 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> ...


 

本文實例講述了jQuery實現購物車計算價格功能的簡易方法,做的比較簡單,現分享給大家供大家參考。具體如下:

目的

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>jQuery實現的購物車功能</title>
 8 <!-- 使用絕對路徑引入 jQuery庫文件 -->
 9 <script type="text/javascript"
10     src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>
11 <script type="text/javascript">
12     $(function() {
13         //根據類選擇器,當點擊 添加商品按鈕的時候觸發,為加號按鈕註冊click事件處理函數
14         $(".add").click(function() {
15             var t = $(this).parent().find('input[class*=text_box]');
16             //每點擊添加 按鈕1次,商品數量加1
17             t.val(parseInt(t.val()) + 1);
18             //再調用計算商品總價方法
19             setTotal();
20         });
21 
22         //根據類選擇器,當點擊 減號 按鈕的時候觸發
23         $(".min").click(function() {
24             var t = $(this).parent().find('input[class*=text_box]');
25             //每點擊減少按鈕1次,商品數量減1
26             t.val(parseInt(t.val()) - 1);
27             //當文本框的值為減少到小於等於1時候,取值1
28             if (parseInt(t.val()) < 0) {
29                 t.val(0);
30             }
31             //再調用計算商品總價方法
32             setTotal();
33         });
34 
35         //計算總價格的函數
36         function setTotal() {
37             var s = 0;
38             //each 遍歷
39             $("#tab td").each(
40                     function() {
41                     //find()方法 遍歷input標簽中的後代, class名為 text_box中 文本框 中的值,即:商品的數量,乘以商品的價格
42                         s += parseInt($(this).find('input[class*=text_box]').val())* 
43                                 parseFloat($(this).find('span[class*=price]').text());
44                     });
45             //將計算的結果通過 jQuery的 html()方法賦予給 總價,並通過 toFixed()進行取捨
46             $("#total").html(s.toFixed(2));
47         }
48         //再調用計算商品總價方法
49         setTotal();
50     });
51 </script>
52 </head>
53 <body>
54     <table id="tab">
55         <tr>
56             <td><span>商品單價:</span><span class="price">2.50(元)</span> <input
57                 class="min" name="" type="button" value="-" /> <input
58                 class="text_box" name="" type="text" value="1" /> <input
59                 class="add" name="" type="button" value="+" /></td>
60         </tr>
61         <tr>
62             <td><span>商品單價:</span><span class="price">7.50(元)</span> <input
63                 class="min" name="" type="button" value="-" /> <input
64                 class="text_box" name="" type="text" value="1" /> <input
65                 class="add" name="" type="button" value="+" /></td>
66         </tr>
67     </table>
68     <p>
69         總價:<label id="total"></label>(元)
70     </p>
71 </body>
72 </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基本語法的學習。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自 JDK5 推出以來,註解已成為Java生態系統不可缺少的一部分。雖然開發者為Java框架(例如Spring的@Autowired)開發了無數的自定義註解,但編譯器認可的一些註解非常重要。 在本文中,我們將看到5個Java編譯器支持的註解,並瞭解其期望用途。順便,我們將探索其創建背後的基本原理,圍 ...
  • Java Web學習 一、搭建java web開發環境: (1)安裝jdk (2)安裝Tomcat伺服器(Apache的開源項目),安裝Tomcat並設置環境變數 (3)安裝EclipseEE(或者MyEclipse) 二、WEB-INF安全目錄介紹(只有伺服器可以訪問) (1)web.xml文件( ...
  • 這篇文章主要是為了溫習下平衡二叉樹,同時添加了樹型列印的介面,讓平衡二叉樹的添加和刪除更容易理解。 接下來的篇幅很長,需要有很多的耐心,做好了準備接下來往下看吧。 通俗的來說: 二叉樹就是節點度最大為2的樹,也就是最多包含兩個子樹,左子樹和右子樹,包含了空樹。 二叉排序樹(Binary Sort T ...
  • 一.java.util.logging.Logger簡介 java.util.logging.Logger不是什麼新鮮東西了,1.4就有了,可是因為log4j的存在,這個logger一直沉默著, 其實在一些測試性的代碼中,jdk自帶的logger比log4j更方便。 二.Logger的級別 比log ...
  • c++中自帶了一些非常強大卻鮮為人知的功能庫—pd_ds庫 裡面含有紅黑樹(rb_tree),哈希表(gp_hash_table),可持久化平衡樹(rope)等超強數據結構 但是有一件非常令人頭痛的事情—頭文件太長了!根本背不過! 不過前些日子看到一位大佬的代碼 他引用了這樣一個頭文件 不查不知道, ...
  • 八、課程詳情頁功能的實現 8.1.課程列表 (1)配置urls MxOnline/urls中 course裡面新建urls.py 把course-list.html拷貝到templates目錄下 (2)course-list.html繼承base.html 修改title,修改bread裡面,con ...
  • 由於前端資源緊缺,我的後端系統遲遲等不來它的前端,沒辦法只好自己來寫了。從html,js入門學起,然後照著vue.js的官方教程寫了幾個實例,從github上clone了一個不錯的vue.js模版,填充了一個星期。雖然界面有些醜,但是總算是走通了全部的業務,期間被跨域,跳轉,cookie等問題折磨得 ...
  • 一.dom4j的簡介 dom4j是一個Java的XML API,是jdom的升級品,用來讀寫XML文件的。dom4j是一個十分優秀的JavaXML API,具有性能優異、功能強大和極其易使用的特點,它的性能超過sun公司官方的dom技術,同時它也是一個開放源代碼的軟體,可以在SourceForge上 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...