购物车前端开发(jQuery和bootstrap3)_javascript技巧

作为一名不在软件公司工作的软件工程师,不仅要会写后台代码(PHP/JAVA/SQL...),还是兼顾前端工程师的工作(html/javascript/css...)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。

这里分享的仅仅是针对购物车的操作(产品数量的增加减少,删除购物车中产品项),假设购物车中已经放有若干产品。闲话少说,先上两张效果图。

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>产品型号</label></th>
 <th style="width:100px;"><label>单价</label></th>
 <th style="width:120px;"><label>数量</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>种产品型号,共计<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部分用于显示购物车内的产品明细,在其后使用了一个DIV用于显示汇总信息。这里使用了一个技巧需要特别说明一下:

1.为元素指定一些虚假的class名称(样式表中不存在的样式名称),方便使用JQuery的过滤器找到特定元素。如上述代码中的样式check-all / check-one / cart / subtotal

Javascript代码需要实现以下几个功能:

1.产品全选功能

2.计算产品小计(即产品单价 * 购买数量)

3.用户选中购物车中的某个产品型号,需要重新计算页面下方的汇总信息,包括选中的产品型号种类、产品数量小计和金额小计

4.用户删除购物车中某个产品型号,或是修改购买数量时,需要重新计算页面下方的汇总信息。

下面就以上功能一一说明:

1.产品全选功能

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

为购物车表格中的每一样选择框绑定单击事件。在这个事件中,需要判断出用户点击的是“全选”的选择框,还是每一个产品自己的选择框,那么这里就又一次用到了上面提到的虚假样式。这里需要特别说明的是JQuery读取元素的属性通常是使用attr()方法,但是对于checkbox来说,使用attr()无法正确读取到其checked属性值。正确用法是使用prop()方法来读取。

如果用户点击了“全选”,那么所有的选择框都应该被选中,这一点很容易考虑到。但是有一个细节需要注意,就是在用户手工一个一个的将所有产品选中时,程序应该将“全选”框也设为选中状态,或是在全部选中的状态下,用户手工取消了某一个产品的选中状态,那么程序也应该将“全选”框设为未选中状态。

最后一行代码是在用户选择完毕后,需要重新计算购物车的汇总信息。

2.产品小计功能代码:

 /*
  * 计算购物车中每一个产品行的金额小计
  *
  * 参数 row 购物车表格中的行元素tr
  *
  */
 function getSubTotal(row) {
 var price = parseFloat($(row).find("span:first").text()); //获取单价
  var qty = parseInt($(row).find(":text").val()); //获取数量
  var result = price * qty; //计算金额小计
  $(row).find(".subtotal").text(result.toFixed(2)); //将计算好的金额小计写入到“小计”栏位中
 };

这个函数需要传入一个参数,即用于显示购物车内容的tr元素。
在显示购物车内容的表格中,每一个产品单价使用一个span元素包裹,且是这一行中的第一个span元素,使用JQuery过滤器$(row).find("span:first")即可以定位到产品单价,使用其text函数读取内容,并使用parseFloat将读取到的字符串转为浮点数。
购买数量,因为用户可能会去改变,所以使用input来展现。同事,使用如下过滤器即可定位到数量
$(row).find(":text")

并使用parseInt将其转为整数。在计算好单个产品金额小计之后,就需要将其写入到“小计”栏位中,使用toFixed方法,将数字格式化为带有两位小数样式。

3.购物车金额汇总

 /*
  * 计算购物车中产品的累计金额
  *
  *
  */
 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++; //累加产品品种数量
    qtyTotal += parseInt($(this).find(":text").val()); //累计产品购买数量
    priceTotal += parseFloat($(this).find(".subtotal").text()); //累计产品金额
   }
  });    $("#itemCount").text(itemCount);
  $("#qtyCount").text(qtyTotal);
 $("#priceTotal").text(priceTotal.toFixed(2));
 };

计算购物车汇总信息时,应该是遍历购物车中所有的行,将每一行的小计和数量分别进行累加即可。这里使用一个技巧来获取购物车表格中的所有行$(cartTable).find("tr:gt(0)")

这里使用的tr:gt(0)是表示选择表格中所有的tr元素并且索引是大于0的(即除去第一个tr元素),这是为什么呢?我们回头看一下HTML代码就不难发现,第一个tr元素是表格标题头,不包含任何业务数据,所以在遍历时,应该除去这一个tr元素。

4.用户删除产品,或是修改购买数量时重新计算产品小计和汇总信息

//为数量调整的+ -号提供单击事件,并重新计算产品小计
 /*
  * 为购物车中每一行绑定单击事件,以及每行中的输入框绑定键盘事件
  * 根据触发事件的元素执行不同动作
  * 增加数量
  * 减少数量
  * 删除产品
  *
  */
 $(cartTable).find("tr:gt(0)").each(function() {
 var input = $(this).find(":text");
 //为数量输入框添加事件,计算金额小计,并更新总计
 $(input).keyup(function() {
 var val = parseInt($(this).val());
 if (isNaN(val) || (val < 1)) { $(this).val("1"); }
  getSubTotal($(this).parent().parent()); //tr element
  getTotal();
 });

 //为数量调整按钮、删除添加单击事件,计算金额小计,并更新总计
 $(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("确定要从购物车中删除此产品?")) {
    $(this).remove();
 }
  }
   getTotal();
 });

我在这里并不是一一对“增加”、“减少”和“删除”按钮进行事件绑定,而是将单击事件统一绑定在TR行上,再对触发单击事件的元素进行判断,进而决定执行何种操作。

点击“+”或是“-”按钮时,程序会将数量加一或是减一,并重新计算产品小计和汇总信息。

同时,还为数量输入框绑定了键盘事件,在输入框内每按下一次键盘,都会触发该事件,重新计算产品小计和汇总信息。

至此,购物车的前端开发,算是告一段落。

小伙伴们可以使用以下链接获取源码:https://github.com/chris-mao/ShoppingCart.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, bootstrap
购物车
bootstrap购物车页面、bootstrap 购物车、bootstrap 购物车模板、bootstrap 购物车加减、bootstrap购物车图标,以便于您获取更多的相关知识。

时间: 2024-11-01 21:58:39

购物车前端开发(jQuery和bootstrap3)_javascript技巧的相关文章

RGB转换实现代码,淘宝前端开发工程师笔试题_javascript技巧

例如: #1234ff 输出 #1234ff #123 输出 #123 #12345g 输出 #12345g 复制代码 代码如下: function RGB(rgb) { reg=/^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/; if ( reg.test(rgb) ) rgb='rgb('+parseInt(RegExp.$1,16)+","+parseInt(RegExp.$2,16)+","+pars

web前端开发JQuery常用实例代码片段(50个)_jquery

本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

对Web开发中前端框架与前端类库的一些思考_javascript技巧

说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有几百的小型电商网站,却要大喊"某宝就是这么搞的",然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统...等巴拉巴拉的一堆用来处理高并发,海量数据访问

使用微信小程序开发前端【快速入门】_javascript技巧

前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

一探前端开发中的JS调试技巧

友情提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会

带有定位当前位置的百度地图前端web api实例代码_javascript技巧

废话不多说,直接给大家贴代码了,具体代码如下所示, 关键代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content=

我爱骡:网站前端开发设计中的SEO技巧

中介交易 SEO诊断 淘宝客 云主机 技术大厅 在进行网站前端开发设计的时候,如何做到用户与SEO兼得,是每个站长都要考虑的问题,很多时候要做到确实不易,下面整理几个小技巧,大家可以看下. 一.文字替换图片 这种手法在LOGO的处理上最为常见,很多时候人们会把首页的LOGO加上<H1>标签,可是<H1>标签里如果没有文字的话,效果肯定不好,因此很多人会在logo上加上alt描述,但是肯定还是没有直接文字或者锚文本来的效果好,这个时候我们就需要用到这个技巧了,我们来看一下一般人的做法

js实现纯前端的图片预览_javascript技巧

图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅.  一.准备功夫1──FileReader   FileReader是HTML5的新特性,用于读取Bl

使用bootstrap3开发响应式网站_javascript技巧

本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下 第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站. 下面就是本文的实例,具体代码: 时间线来自国外网站,使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: