购物车前端开发(jQuery和bootstrap3)_Javascript教程-查字典教程网
购物车前端开发(jQuery和bootstrap3)
购物车前端开发(jQuery和bootstrap3)
发布时间:2016-12-30 来源:查字典编辑
摘要:作为一名不在软件公司工作的软件工程师,不仅要会写后台代码(PHP/JAVA/SQL...),还是兼顾前端工程师的工作(html/javasc...

作为一名不在软件公司工作的软件工程师,不仅要会写后台代码(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> <table id="cartTable" > <thead> <tr> <th><label><input type="checkbox" /> 全选</label></th> <th><label>产品型号</label></th> <th><label>单价</label></th> <th><label>数量</label></th> <th><label>小计</label></th> <th><label>操作</label></th> </tr> </thead> <tbody> <tr > <td ><input type="checkbox" /> </td> <td> <label>Item 1</label> </td> <td><span>76.55</span></td> <td> <span>-</span> <input type="text" value="10" /> <span>+</span> </td> <td>101</td> <td><span>删除</span></td> </tr> <tr> <td ><input type="checkbox" /></td> <td> <label>Item 2</label> </td> <td><span>1100</span></td> <td> <span>-</span> <input type="text" value="1" /> <span>+</span> </td> <td>352</td> <td><span>删除</span></td> </tr> <tr> <td ><input type="checkbox" /></td> <td> <label>Item 3</label> </td> <td><span>1200</span></td> <td> <span>-</span> <input type="text" value="1" /> <span>+</span> </td> <td>9876.55</td> <td><span>删除</span></td> </tr> <tr> <td ><input type="checkbox" /></td> <td> <label>Item 4</label> </td> <td><span>1400</span></td> <td> <span>-</span> <input type="text" value="1" /> <span>+</span> </td> <td>9876.55</td> <td><span>删除</span></td> </tr> </tbody> </table> <div> <div> <div> <div> <label>金额合计:<span>¥</span><span id="priceTotal">0.00</span></label> </div> <div> <label>您选择了<span id="itemCount"></span>种产品型号,共计<span id="qtyCount"></span>件</label> </div> <div 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

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类