欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

購(gòu)物車前端開(kāi)發(fā)（jQuery和bootstrap3）

 更新時(shí)間：2016年08月27日 10:20:53   作者：chris_mao  
針對(duì)購(gòu)物車的操作，進(jìn)行產(chǎn)品數(shù)量的增加減少，刪除購(gòu)物車中產(chǎn)品項(xiàng)，本文使用JQuery1.11和bootstrap3進(jìn)行購(gòu)物車開(kāi)發(fā)，感興趣的小伙伴們

作為一名不在軟件公司工作的軟件工程師，不僅要會(huì)寫后臺(tái)代碼(PHP/JAVA/SQL...)，還是兼顧前端工程師的工作(html/javascript/css...)。下面就來(lái)分享一個(gè)在實(shí)際工作項(xiàng)目中使用到的購(gòu)物車的前端開(kāi)發(fā)。

這里分享的僅僅是針對(duì)購(gòu)物車的操作(產(chǎn)品數(shù)量的增加減少，刪除購(gòu)物車中產(chǎn)品項(xiàng))，假設(shè)購(gòu)物車中已經(jīng)放有若干產(chǎn)品。閑話少說(shuō)，先上兩張效果圖。

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)品型號(hào)</label></th>
 <th style="width:100px;"><label>單價(jià)</label></th>
 <th style="width:120px;"><label>數(shù)量</label></th>
 <th style="width:100px;"><label>小計(jì)</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>金額合計(jì):<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)品型號(hào)，共計(jì)<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部分用于顯示購(gòu)物車內(nèi)的產(chǎn)品明細(xì)，在其后使用了一個(gè)DIV用于顯示匯總信息。這里使用了一個(gè)技巧需要特別說(shuō)明一下：

1.為元素指定一些虛假的class名稱(樣式表中不存在的樣式名稱)，方便使用JQuery的過(guò)濾器找到特定元素。如上述代碼中的樣式check-all / check-one / cart / subtotal

Javascript代碼需要實(shí)現(xiàn)以下幾個(gè)功能：

1.產(chǎn)品全選功能

2.計(jì)算產(chǎn)品小計(jì)（即產(chǎn)品單價(jià) ＊ 購(gòu)買數(shù)量）

3.用戶選中購(gòu)物車中的某個(gè)產(chǎn)品型號(hào)，需要重新計(jì)算頁(yè)面下方的匯總信息，包括選中的產(chǎn)品型號(hào)種類、產(chǎn)品數(shù)量小計(jì)和金額小計(jì)

4.用戶刪除購(gòu)物車中某個(gè)產(chǎn)品型號(hào)，或是修改購(gòu)買數(shù)量時(shí)，需要重新計(jì)算頁(yè)面下方的匯總信息。

下面就以上功能一一說(shuō)明：

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);
  }

  //如果手工一個(gè)一個(gè)的點(diǎn)選了所有勾選框，需要自動(dòng)將“全選”勾上或是取消
  var items = cartTable.find("tr:gt(0)");
  $(cartTable).find(".check-all").prop("checked", items.find(":checkbox:checked").length == items.length);

  getTotal();
 });

為購(gòu)物車表格中的每一樣選擇框綁定單擊事件。在這個(gè)事件中，需要判斷出用戶點(diǎn)擊的是“全選”的選擇框，還是每一個(gè)產(chǎn)品自己的選擇框，那么這里就又一次用到了上面提到的虛假樣式。這里需要特別說(shuō)明的是JQuery讀取元素的屬性通常是使用attr()方法，但是對(duì)于checkbox來(lái)說(shuō)，使用attr()無(wú)法正確讀取到其checked屬性值。正確用法是使用prop()方法來(lái)讀取。

如果用戶點(diǎn)擊了“全選”，那么所有的選擇框都應(yīng)該被選中，這一點(diǎn)很容易考慮到。但是有一個(gè)細(xì)節(jié)需要注意，就是在用戶手工一個(gè)一個(gè)的將所有產(chǎn)品選中時(shí)，程序應(yīng)該將“全選”框也設(shè)為選中狀態(tài)，或是在全部選中的狀態(tài)下，用戶手工取消了某一個(gè)產(chǎn)品的選中狀態(tài)，那么程序也應(yīng)該將“全選”框設(shè)為未選中狀態(tài)。

最后一行代碼是在用戶選擇完畢后，需要重新計(jì)算購(gòu)物車的匯總信息。

2.產(chǎn)品小計(jì)功能代碼：

 /*
  * 計(jì)算購(gòu)物車中每一個(gè)產(chǎn)品行的金額小計(jì)
  *
  * 參數(shù) row 購(gòu)物車表格中的行元素tr
  *
  */
 function getSubTotal(row) {
 var price = parseFloat($(row).find("span:first").text()); //獲取單價(jià)
  var qty = parseInt($(row).find(":text").val()); //獲取數(shù)量
  var result = price * qty; //計(jì)算金額小計(jì)
  $(row).find(".subtotal").text(result.toFixed(2)); //將計(jì)算好的金額小計(jì)寫入到“小計(jì)”欄位中
 };

這個(gè)函數(shù)需要傳入一個(gè)參數(shù)，即用于顯示購(gòu)物車內(nèi)容的tr元素。
在顯示購(gòu)物車內(nèi)容的表格中，每一個(gè)產(chǎn)品單價(jià)使用一個(gè)span元素包裹，且是這一行中的第一個(gè)span元素，使用JQuery過(guò)濾器$(row).find("span:first")即可以定位到產(chǎn)品單價(jià)，使用其text函數(shù)讀取內(nèi)容，并使用parseFloat將讀取到的字符串轉(zhuǎn)為浮點(diǎn)數(shù)。
購(gòu)買數(shù)量，因?yàn)橛脩艨赡軙?huì)去改變，所以使用input來(lái)展現(xiàn)。同事，使用如下過(guò)濾器即可定位到數(shù)量
$(row).find(":text")

并使用parseInt將其轉(zhuǎn)為整數(shù)。在計(jì)算好單個(gè)產(chǎn)品金額小計(jì)之后，就需要將其寫入到“小計(jì)”欄位中，使用toFixed方法，將數(shù)字格式化為帶有兩位小數(shù)樣式。

3.購(gòu)物車金額匯總

 /*
  * 計(jì)算購(gòu)物車中產(chǎn)品的累計(jì)金額
  *
  *
  */
 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()); //累計(jì)產(chǎn)品購(gòu)買數(shù)量
    priceTotal += parseFloat($(this).find(".subtotal").text()); //累計(jì)產(chǎn)品金額
   }
  });    $("#itemCount").text(itemCount);
  $("#qtyCount").text(qtyTotal);
 $("#priceTotal").text(priceTotal.toFixed(2));
 };

計(jì)算購(gòu)物車匯總信息時(shí)，應(yīng)該是遍歷購(gòu)物車中所有的行，將每一行的小計(jì)和數(shù)量分別進(jìn)行累加即可。這里使用一個(gè)技巧來(lái)獲取購(gòu)物車表格中的所有行$(cartTable).find("tr:gt(0)")

這里使用的tr:gt(0)是表示選擇表格中所有的tr元素并且索引是大于0的（即除去第一個(gè)tr元素），這是為什么呢？我們回頭看一下HTML代碼就不難發(fā)現(xiàn)，第一個(gè)tr元素是表格標(biāo)題頭，不包含任何業(yè)務(wù)數(shù)據(jù)，所以在遍歷時(shí)，應(yīng)該除去這一個(gè)tr元素。

4.用戶刪除產(chǎn)品，或是修改購(gòu)買數(shù)量時(shí)重新計(jì)算產(chǎn)品小計(jì)和匯總信息

//為數(shù)量調(diào)整的＋ －號(hào)提供單擊事件，并重新計(jì)算產(chǎn)品小計(jì)
 /*
  * 為購(gòu)物車中每一行綁定單擊事件，以及每行中的輸入框綁定鍵盤事件
  * 根據(jù)觸發(fā)事件的元素執(zhí)行不同動(dòng)作
  * 增加數(shù)量
  * 減少數(shù)量
  * 刪除產(chǎn)品
  *
  */
 $(cartTable).find("tr:gt(0)").each(function() {
 var input = $(this).find(":text"); 
 //為數(shù)量輸入框添加事件，計(jì)算金額小計(jì)，并更新總計(jì)
 $(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)整按鈕、刪除添加單擊事件，計(jì)算金額小計(jì)，并更新總計(jì)
 $(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("確定要從購(gòu)物車中刪除此產(chǎn)品？")) {
    $(this).remove();
 }
  }
   getTotal();
 });

我在這里并不是一一對(duì)“增加”、“減少”和“刪除”按鈕進(jìn)行事件綁定，而是將單擊事件統(tǒng)一綁定在TR行上，再對(duì)觸發(fā)單擊事件的元素進(jìn)行判斷，進(jìn)而決定執(zhí)行何種操作。

點(diǎn)擊“＋”或是“－”按鈕時(shí)，程序會(huì)將數(shù)量加一或是減一，并重新計(jì)算產(chǎn)品小計(jì)和匯總信息。

同時(shí)，還為數(shù)量輸入框綁定了鍵盤事件，在輸入框內(nèi)每按下一次鍵盤，都會(huì)觸發(fā)該事件，重新計(jì)算產(chǎn)品小計(jì)和匯總信息。

至此，購(gòu)物車的前端開(kāi)發(fā)，算是告一段落。

小伙伴們可以使用以下鏈接獲取源碼：https://github.com/chris-mao/ShoppingCart.git

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論