購物車前端開發(fā)（jQuery和bootstrap3）
作為一名不在軟件公司工作的軟件工程師，不僅要會寫后臺代碼(PHP/JAVA/SQL...)，還是兼顧前端工程師的工作(html/javascript/css...)。下面就來分享一個在實際工作項目中使用到的購物車的前端開發(fā)。
這里分享的僅僅是針對購物車的操作(產(chǎn)品數(shù)量的增加減少，刪除購物車中產(chǎn)品項)，假設(shè)購物車中已經(jīng)放有若干產(chǎn)品。閑話少說，先上兩張效果圖。
HTML代碼如下：這里使用到了JQuery1.11和bootstrap3 。
<!DOCTYPE html> <html> <HEADER> <meta charset="UTF-8"> <title>Shopping Cart</title> <script type="text/javascript" src="jquery-1.11.min.js"></script> <script type="text/javascript" src="demo.js"></script> <link href="bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" /> </HEADER> <body class="container"> <table id="cartTable" class="cart table table-condensed" > <thead> <tr> <th style="width:60px;"><label><input class="check-all check" type="checkbox" /> 全選</label></th> <th><label>產(chǎn)品型號</label></th> <th style="width:100px;"><label>單價</label></th> <th style="width:120px;"><label>數(shù)量</label></th> <th style="width:100px;"><label>小計</label></th> <th style="width:40px;"><label>操作</label></th> </tr> </thead> <tbody> <tr > <td ><input class="check-one check" type="checkbox" /> </td> <td class="goods"> <label>Item 1</label> </td> <td class="number small-bold-red"><span>76.55</span></td> <td class="input-group"> <span class="input-group-addon minus">-</span> <input type="text" class="number form-control input-sm" value="10" /> <span class="input-group-addon plus">+</span> </td> <td class="subtotal number small-bold-red">101</td> <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td> </tr> <tr> <td ><input class="check-one check" type="checkbox" /></td> <td class="goods"> <label>Item 2</label> </td> <td class="number small-bold-red"><span>1100</span></td> <td class="input-group"> <span class="input-group-addon minus">-</span> <input type="text" class="number form-control input-sm" value="1" /> <span class="input-group-addon plus">+</span> </td> <td class="subtotal number small-bold-red">352</td> <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td> </tr> <tr> <td ><input class="check-one check" type="checkbox" /></td> <td class="goods"> <label>Item 3</label> </td> <td class="number small-bold-red"><span>1200</span></td> <td class="input-group"> <span class="input-group-addon minus">-</span> <input type="text" class="number form-control input-sm" value="1" /> <span class="input-group-addon plus">+</span> </td> <td class="subtotal number small-bold-red">9876.55</td> <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td> </tr> <tr> <td ><input class="check-one check" type="checkbox" /></td> <td class="goods"> <label>Item 4</label> </td> <td class="number small-bold-red"><span>1400</span></td> <td class="input-group"> <span class="input-group-addon minus">-</span> <input type="text" class="number form-control input-sm" value="1" /> <span class="input-group-addon plus">+</span> </td> <td class="subtotal number small-bold-red">9876.55</td> <td class="operation"><span class="delete btn btn-xs btn-primary">刪除</span></td> </tr> </tbody> </table> <div class="row"> <div class="col-md-12 col-lg-12 col-sm-12"> <div style="border-top:1px solid gray;padding:4px 10px;"> <div style="margin-left:20px;" class="pull-right total"> <label>金額合計:<span class="currency">￥</span><span id="priceTotal" class="large-bold-red">0.00</span></label> </div> <div class="pull-right"> <label>您選擇了<span id="itemCount" class="large-bold-red" style="margin:0 4px;"></span>種產(chǎn)品型號，共計<span id="qtyCount" class="large-bold-red" style="margin:0 4px;"></span>件</label> </div> <div class="pull-right selected" id="selected"> <span id="selectedTotal"></span> </div> </div> </div> </div> </body> </html>
HTML代碼主要分為兩大塊，TABLE部分用于顯示購物車內(nèi)的產(chǎn)品明細(xì)，在其后使用了一個DIV用于顯示匯總信息。這里使用了一個技巧需要特別說明一下：
1.為元素指定一些虛假的class名稱(樣式表中不存在的樣式名稱)，方便使用JQuery的過濾器找到特定元素。如上述代碼中的樣式check-all / check-one / cart / subtotal
Javascript代碼需要實現(xiàn)以下幾個功能：
1.產(chǎn)品全選功能
2.計算產(chǎn)品小計（即產(chǎn)品單價 ＊ 購買數(shù)量）
3.用戶選中購物車中的某個產(chǎn)品型號，需要重新計算頁面下方的匯總信息，包括選中的產(chǎn)品型號種類、產(chǎn)品數(shù)量小計和金額小計
4.用戶刪除購物車中某個產(chǎn)品型號，或是修改購買數(shù)量時，需要重新計算頁面下方的匯總信息。
下面就以上功能一一說明：
1.產(chǎn)品全選功能
$(cartTable).find(":checkbox").click(function() {
//全選框單擊
if ($(this).hasClass("check-all")) {
var checked = $(this).prop("checked");
$(cartTable).find(".check-one").prop("checked", checked);
}
//如果手工一個一個的點選了所有勾選框，需要自動將“全選”勾上或是取消
var items = cartTable.find("tr:gt(0)");
$(cartTable).find(".check-all").prop("checked", items.find(":checkbox:checked").length == items.length);
getTotal();
});
為購物車表格中的每一樣選擇框綁定單擊事件。在這個事件中，需要判斷出用戶點擊的是“全選”的選擇框，還是每一個產(chǎn)品自己的選擇框，那么這里就又一次用到了上面提到的虛假樣式。這里需要特別說明的是JQuery讀取元素的屬性通常是使用attr()方法，但是對于checkbox來說，使用attr()無法正確讀取到其checked屬性值。正確用法是使用prop()方法來讀取。
如果用戶點擊了“全選”，那么所有的選擇框都應(yīng)該被選中，這一點很容易考慮到。但是有一個細(xì)節(jié)需要注意，就是在用戶手工一個一個的將所有產(chǎn)品選中時，程序應(yīng)該將“全選”框也設(shè)為選中狀態(tài)，或是在全部選中的狀態(tài)下，用戶手工取消了某一個產(chǎn)品的選中狀態(tài)，那么程序也應(yīng)該將“全選”框設(shè)為未選中狀態(tài)。
最后一行代碼是在用戶選擇完畢后，需要重新計算購物車的匯總信息。
2.產(chǎn)品小計功能代碼：
/*
* 計算購物車中每一個產(chǎn)品行的金額小計
*
* 參數(shù) row 購物車表格中的行元素tr
*
*/
function getSubTotal(row) {
var price = parseFloat($(row).find("span:first").text()); //獲取單價
var qty = parseInt($(row).find(":text").val()); //獲取數(shù)量
var result = price * qty; //計算金額小計
$(row).find(".subtotal").text(result.toFixed(2)); //將計算好的金額小計寫入到“小計”欄位中
};
這個函數(shù)需要傳入一個參數(shù)，即用于顯示購物車內(nèi)容的tr元素。
在顯示購物車內(nèi)容的表格中，每一個產(chǎn)品單價使用一個span元素包裹，且是這一行中的第一個span元素，使用JQuery過濾器$(row).find("span:first")即可以定位到產(chǎn)品單價，使用其text函數(shù)讀取內(nèi)容，并使用parseFloat將讀取到的字符串轉(zhuǎn)為浮點數(shù)。
購買數(shù)量，因為用戶可能會去改變，所以使用input來展現(xiàn)。同事，使用如下過濾器即可定位到數(shù)量
$(row).find(":text")
并使用parseInt將其轉(zhuǎn)為整數(shù)。在計算好單個產(chǎn)品金額小計之后，就需要將其寫入到“小計”欄位中，使用toFixed方法，將數(shù)字格式化為帶有兩位小數(shù)樣式。
3.購物車金額匯總
/*
* 計算購物車中產(chǎn)品的累計金額
*
*
*/
function getTotal() {
var qtyTotal = 0;
var itemCount = 0;
var priceTotal = 0;
$(cartTable).find("tr:gt(0)").each(function() {
if ($(this).find(":checkbox").prop("checked") == true) { //如果選中
itemCount++; //累加產(chǎn)品品種數(shù)量
qtyTotal += parseInt($(this).find(":text").val()); //累計產(chǎn)品購買數(shù)量
priceTotal += parseFloat($(this).find(".subtotal").text()); //累計產(chǎn)品金額
}
}); $("#itemCount").text(itemCount);
$("#qtyCount").text(qtyTotal);
$("#priceTotal").text(priceTotal.toFixed(2));
};
計算購物車匯總信息時，應(yīng)該是遍歷購物車中所有的行，將每一行的小計和數(shù)量分別進(jìn)行累加即可。這里使用一個技巧來獲取購物車表格中的所有行$(cartTable).find("tr:gt(0)")
這里使用的tr:gt(0)是表示選擇表格中所有的tr元素并且索引是大于0的（即除去第一個tr元素），這是為什么呢？我們回頭看一下HTML代碼就不難發(fā)現(xiàn)，第一個tr元素是表格標(biāo)題頭，不包含任何業(yè)務(wù)數(shù)據(jù)，所以在遍歷時，應(yīng)該除去這一個tr元素。
4.用戶刪除產(chǎn)品，或是修改購買數(shù)量時重新計算產(chǎn)品小計和匯總信息
//為數(shù)量調(diào)整的＋ －號提供單擊事件，并重新計算產(chǎn)品小計
/*
* 為購物車中每一行綁定單擊事件，以及每行中的輸入框綁定鍵盤事件
* 根據(jù)觸發(fā)事件的元素執(zhí)行不同動作
* 增加數(shù)量
* 減少數(shù)量
* 刪除產(chǎn)品
*
*/
$(cartTable).find("tr:gt(0)").each(function() {
var input = $(this).find(":text");
//為數(shù)量輸入框添加事件，計算金額小計，并更新總計
$(input).keyup(function() {
var val = parseInt($(this).val());
if (isNaN(val) || (val < 1)) { $(this).val("1"); }
getSubTotal($(this).parent().parent()); //tr element
getTotal();
});
//為數(shù)量調(diào)整按鈕、刪除添加單擊事件，計算金額小計，并更新總計
$(this).click(function() {
var val = parseInt($(input).val());
if (isNaN(val) || (val < 1)) { val = 1; }
if ($(window.event.srcElement).hasClass("minus")) {
if (val > 1) val--;
input.val(val);
getSubTotal(this);
}
else if ($(window.event.srcElement).hasClass("plus")) {
if (val < 9999) val++;
input.val(val);
getSubTotal(this);
}
else if ($(window.event.srcElement).hasClass("delete")) {
if (confirm("確定要從購物車中刪除此產(chǎn)品？")) {
$(this).remove();
}
}
getTotal();
});
我在這里并不是一一對“增加”、“減少”和“刪除”按鈕進(jìn)行事件綁定，而是將單擊事件統(tǒng)一綁定在TR行上，再對觸發(fā)單擊事件的元素進(jìn)行判斷，進(jìn)而決定執(zhí)行何種操作。
點擊“＋”或是“－”按鈕時，程序會將數(shù)量加一或是減一，并重新計算產(chǎn)品小計和匯總信息。
同時，還為數(shù)量輸入框綁定了鍵盤事件，在輸入框內(nèi)每按下一次鍵盤，都會觸發(fā)該事件，重新計算產(chǎn)品小計和匯總信息。
至此，購物車的前端開發(fā)，算是告一段落。
小伙伴們可以使用以下鏈接獲取源碼：https://github.com/chris-mao/ShoppingCart.git
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- AngularJS折疊菜單實現(xiàn)方法示例
- AngularJS動態(tài)菜單操作指令
- angularjs+bootstrap菜單的使用示例代碼
- AngularJS實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單示例代碼
- 實例詳解AngularJS實現(xiàn)無限級聯(lián)動菜單
- AngularJs中Bootstrap3 datetimepicker使用實例
- Bootstrap3 多選和單選框(checkbox)
- Bootstrap3 datetimepicker控件使用實例
- Bootstrap3制作搜索框樣式的方法
- AngularJS+Bootstrap3多級導(dǎo)航菜單的實現(xiàn)代碼
相關(guān)文章
JavaScript實現(xiàn)時間表動態(tài)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)時間表動態(tài)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript實現(xiàn)淘寶購物件數(shù)選擇
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)淘寶購物件數(shù)的選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Bootstrap3.0建站教程(一)之bootstrap表單元素排版
本文給大家介紹Bootstrap3.0建站教程(一)之bootstrap表單元素排版，本文給大家列舉了文字和輸入框前后排列和上下排列的實例代碼，有需要的朋友參考下吧2016-06-06
這篇文章主要介紹了js數(shù)組對象里面如何獲取某個屬性值相等的對象問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了檢查表單元素的值是否為空的實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁源碼
這篇文章主要為大家介紹了disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁源碼的使用，防止源碼泄露保護(hù)網(wǎng)站源碼的最佳解決方案，一行代碼就可以搞定，有需要的可以學(xué)習(xí)參考下2023-11-11
JS實現(xiàn)同一個網(wǎng)頁布局滑動門和TAB選項卡實例
這篇文章主要介紹了JS實現(xiàn)同一個網(wǎng)頁布局滑動門和TAB選項卡效果,通過簡單的自定義切換函數(shù)setTab實現(xiàn)頁面元素的遍歷及屬性切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
mpvue實現(xiàn)小程序簽到金幣掉落動畫(api實現(xiàn))
這篇文章主要介紹了mpvue實現(xiàn)小程序簽到金幣掉落動畫,這里使用小程序自帶的api來實現(xiàn)，文中通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-10-10
JavaScript 異步調(diào)用框架 (Part 6 - 實例 & 模式)
我們用了5篇文章來討論如何編寫一個JavaScript異步調(diào)用框架（問題 & 場景、用例設(shè)計、代碼實現(xiàn)、鏈?zhǔn)秸{(diào)用、鏈?zhǔn)綄崿F(xiàn)），現(xiàn)在是時候讓我們看一下在各種常見開發(fā)情景中如何使用它了。2009-08-08