杰晶网络

购物车前端开发（jQuery和bootstrap3）
网络编程 2024/5/19 佚名
3 2

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

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

购物车前端开发（jQuery和bootstrap3）

HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。

<!DOCTYPE html>
<html>
<HEADER>
 <meta charset="UTF-8">
 <title>Shopping Cart</title>
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.11.min.js">


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
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“购物车前端开发（jQuery和bootstrap3）”
暂无“购物车前端开发（jQuery和bootstrap3）”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接