作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(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行上，再对触发单击事件的元素进行判断，进而决定执行何种操作。
点击“＋”或是“－”按钮时，程序会将数量加一或是减一，并重新计算产品小计和汇总信息。
同时，还为数量输入框绑定了键盘事件，在输入框内每按下一次键盘，都会触发该事件，重新计算产品小计和汇总信息。
至此，购物车的前端开发，算是告一段落。
版权声明：本文为博主原创文章，未经博主允许不得转载。
相关推荐
在本文中，我们将探讨如何使用jQuery 1.11和Bootstrap 3进行购物车前端开发，专注于实现商品数量的增减以及从购物车中删除商品的功能。这些是购物车交互的核心部分，对于提供用户友好的在线购物体验至关重要。 首先...
在IT行业中，前端开发是构建Web应用程序不可或缺的一部分，它的主要任务是实现用户界面以及与用户的交互。本项目“仿照淘宝购物车前端页面设计”旨在训练开发者如何创建一个类似淘宝购物车的功能性页面，提供用户...
在Web开发中，前端购物车模板是实现在线购物功能的关键组成部分。它为用户提供了一个直观的界面，使用户可以方便地添加、编辑和删除购物车中的商品，进而完成订单的创建。本篇将深入探讨“前台购物车模板”的设计...
前端开发简历模板-web前端开发-实习 本文档为一个前端开发简历模板，涵盖了 Web 前端开发的多个方面，包括 React、Vue.js、Redux、React-Redux、Ant Design 等技术栈。下面是从该简历中提取的知识点： React * ...
在构建一个具有前端计算逻辑的H5购物车页面时，我们需要关注多个关键点，这些知识点涵盖了前端开发的多个方面。以下是对这些要点的详细说明： 1. **HTML 结构**： - 页面需要包含各种元素，如商品列表、选择框...
在IT行业中，Web前端开发是构建互联网应用的重要组成部分，它主要负责用户与应用程序之间的交互界面。本综合实例将深入探讨“响应式页面”这一关键概念，这是现代网页设计的基石，确保网页能在不同设备和屏幕尺寸上...
文件是我在学习Jquery框架时下载的很有参考价值的三个不同源码（一个后台，二个前端），其中有购物车后台源码，和用Jquery开发的前端，一个前端仅仅实现了购物车结账的计算功能，另一个以动漫的效果实现添加产品到...
前端开发简历模板 本资源是一个前端开发工程师的简历模板，拥有四年的工作经验，擅长前端开发、手机APP、小程序、H5和管理后台等方面的内容。该简历涵盖了多个项目的工作经验，包括西安藤罗网络科技有限公司、楼...
在开发“我的购物车”功能时，首先需要进行需求分析，确保系统满足用户的基本操作，如登录、购买商品、管理购物车、下单以及接收电子邮件通知。以下是对这些需求的详细阐述： 1. 用户登录：系统应包含用户认证功能...
总结，构建Rails敏捷开发的购物车系统涉及了模型-视图-控制器架构的运用、数据库设计、路由配置、会话管理、前端交互以及安全性和测试等多个方面。通过这个过程，开发者不仅可以学习到Rails的基本用法，还能掌握Web...
在前端开发领域，JavaScript（JS）是不可或缺的一部分，尤其在构建交互性强的用户界面时。本教程将聚焦于一个基于JS的购物车案例，旨在帮助学生和初学者深入理解和实践JavaScript在网页动态功能中的应用。 首先，让...
本资源“前端开发jQuery商品加入购物车效果源代码”提供了一个使用jQuery实现的商品添加到购物车的交互效果，适用于电商网站或其他需要类似功能的项目。 这个源代码的核心知识点包括： 1. **jQuery选择器**：...
Vue.js是一款轻量级的JavaScript库，它以其组件化、易上手的特点在前端开发领域广受欢迎。在这个项目中，Vue.js用于构建用户界面，实现动态数据绑定和视图层的更新。 项目源码结构中包含的"uni-app-mango-diancan-...
在JavaScript开发中，创建一个购物车功能是一项常见的任务，它...通过这个项目，你可以深化对JavaScript编程、前端开发流程以及前后端交互的理解。提供的源代码将是一个宝贵的实践资源，帮助你更好地掌握这些知识点。
在前端开发中，小图标（Icon）扮演着至关重要的角色，它们可以提升用户界面的可读性和美观性。本资源“前端开发小图标（1500个）.zip”包含了一套丰富的图标集合，专为网页开发设计，提供png格式的图像文件，适用于...
【标题】"eclipse 开发的jsp购物车源代码，初学者好帮手"揭示了这是一个基于Eclipse IDE开发的JSP（JavaServer Pages）项目，主要目标是实现一个在线购物车的功能。对于初学者来说，这样的源代码可以帮助他们更好地...
Web点餐系统是一种基于网页的在线订餐平台，它的前端开发是整个系统的重要组成部分，主要负责用户界面的设计和交互功能的实现。在这个项目中，开发者使用了HTML5、CSS3、JavaScript（包括jQuery库）来构建这个前端...
在Java EE Web开发中，构建一个简单的购物车应用是一个经典的实战项目，它涵盖了Web开发中的多个核心概念和技术。本案例中，我们主要关注Cookie技术的使用以及与数据库的交互，这是构建任何电子商务平台的基础。 ...
在前端开发中，JavaScript 是构建交互式用户界面和动态网页的关键技术。对于一个完整的商城购物车功能来说，JavaScript 的作用尤为重要。在这个项目中，我们关注的是如何利用JavaScript实现购物车的增、删、改以及...