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

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

超文本标记语言代码如下：这里使用到了JQuery1.11和bootstrap3。

！DOCTYPE html html头元字符集=' UTF-8 ' title购物车/title脚本类型=' text/JavaScript ' src=' http : jquery-1.11。量滴js '/script脚本类型=' text/JavaScript ' src=' http : demo。js '/script link href=' bootstrap。量滴CSS ' media=' screen ' rel='样式表type=' text/CSS '/header body class=' container ' tablelabelinput class=' check-all check ' type=' checkbox '/全选/标签/th标签产品型号/label/th style=' width :100 px；'标签单价/label/th style=' width :120 px；'标签数量/label/th style=' width :100 px；'标签小计/label/th style=' width :40 px；'标签操作/label/th/tr/ad t正文tr TD输入class=' check-one check ' type=' checkbox '/TD class=' goods '标签审案1/标签/TD TD类='数字小-粗体-红色'跨度76.55/跨度/TD类='输入-组'跨度类='输入-组-附加减-/span输入类型=' text ' class=' number form-control input-sm ' value=' 10 '/span class=' input-group-addon plus '/span/TD删除/span/TD/tr TD输入类别=“检查-一个检查”类型=“复选框”/TD TD class=' goods '标签审案2/label/TD class=' number small-bold-red ' span 1100/span/TD class=' input-group ' span class=' input-group-addon-减号-/span输入类型=' 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 TD TD class=' operation ' span class=' delete BTN BTN-xs BTN-primary '删除/span/TD/tr TD输入class=' check-one check ' type=' checkbox '/TD TD TD class=' goods '标签审案3/标签/TD类='数字小-粗体-红色'跨度1200/跨度/TD类='输入-组'跨度类='输入-组-插件-减号-/span输入类型=' text ' class=' number form-control input-sm '值=' 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 TD input class=' check-one check ' type=' checkbox '/TD TD TD class=' goods '标签演变4/label/TD class=' number small-bold-red ' span 1400/span/TD class=' input-group ' span class=' input-group ' span-group-addon减-/span输入类型=“text”类=数字形式-控制输入-sm ' value=' 1 '/span class=' input-group-addon plus '/span/TD class='小计数字小删除/span/TD/tr/t正文/表格div class=' row ' div class=' col-MD-12 col-LG-12 col-sm-12 ' div style=' border-top :1 px纯灰色； padding:4px 10px ' div style='左边距：20 px'类='向右拉动总数'标签金额合计： span class=' currency '/span span id=' price total ' class=' large-bold-red ' 0.00/span/label/div class=' pull-right ' label您选择了span id=' ItemCount ' class=' large-bold-red ' style=' margin :0 4px；'/span种产品型号，共计span id=' qty count ' class=' large-bold-red ' style=' margin :0 4px；'/span件/label/div class=' pull-right selected ' id=' selected ' span id=' selectedTotal '/span/div/div/body/HTMl HTMl代码主要分为两大块表部分用于显示购物车内的产品明细，在其后使用了一个差异用于显示汇总信息。这里使用了一个技巧需要特别说明一下：

1.为元素指定一些错误的类名(样式表中不存在的样式名)，以便使用JQuery的过滤器来查找特定的元素。如上面的代码所示，全选/一选/购物车/小计

Javascript代码需要实现以下功能：

1.产品选择功能

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

3.当用户在购物车中选择产品型号时，需要重新计算页面底部的汇总信息，包括选择的产品型号类型、产品数量小计和金额小计

4.当用户删除购物车中的产品型号或修改购买数量时，需要重新计算页面底部的汇总信息。

下面逐一介绍上述功能：

1.产品选择功能

$(可搬运)。查找(' :checkbox ')。click(function(){//click if($(this))。has class(' check-all '){ var checked=$(this)。道具('选中')；$(cartTable)。查找('。check-one’)。道具('选中'，选中)；}//如果所有复选框都是手动逐个勾选的，则需要自动勾选“全选”或取消VARIITEMS=Cartable。find(' tr : gt(0))；$(cartTable)。查找('。全选')。prop('checked '，items . find(' : check box : checked ')。长度==items . length)；getTotal()；});为购物车表中的每个选择框绑定一个点击事件。在这种情况下，需要判断用户点击的是“全选”选择框还是每个产品自己的选择框，所以这里再次使用上面提到的假样式。这里需要特别注意的是，JQuery通常使用attr()方法读取元素的属性，但是对于checkbox，使用attr()无法正确读取其选中的属性值。正确的用法是使用prop()方法读取。

如果用户点击“全选”，所有的选择框都要选中，这很容易考虑。但是有一个细节需要注意，那就是当用户手动逐个选择所有产品时，程序也应该将“全选”框设置为选中状态，或者当用户手动取消某个产品的选中状态时，程序也应该将“全选”框设置为未选中状态。

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

2.产品小计功能代码：

/* *计算购物车中各产品线金额的小计* *行元素tr * */函数获取小计(行){var price=parseloan ($(行)。查找(' span : first ')。text())；//获取单价varqty=par sent($(row)。find (':text ')。val())；//得到数量var结果=价格*数量；//计算小计$(行)。查找('。小计')。文本(结果。to fixed(2))；//将计算出的小计写入“小计”字段}；这个函数需要传入一个参数，即用于显示购物车内容的tr元素。在显示购物车内容的表格中，每个产品单价都用span元素包装，这是该行中的第一个span元素。使用JQuery筛选器$(行)。find('span:first ')，可以定位产品单价，使用其text函数读取内容，并使用parseFloat将读取的字符串转换为浮点数。购买数量，因为用户可能会更改，所以使用输入来显示。同事们，使用以下过滤器定位数量$(行)。查找(' :text ')

并使用parseInt将其转换为整数。计算单个产品金额的小计后，需要写入小计字段，使用toFixed方法将数字格式化为两位小数。

3.购物车金额汇总

/* *计算购物车中产品的累计金额* * */函数gettotal(){ var qty total=0；var ItemCount=0；var price total=0；$(可搬运)。find ('tr:gt (0)')。每个(函数(){if ($ (this))。查找(' :checkbox ')。prop(' checked ')==true){//如果选择了itemCount//累计产品品种数量qtytool=parsent($(this)。查找(' :文本')。val())；//累计产品采购数量pricetotal=parsefloat ($ (this)。查找('。小计')。text())；//累计产品金额} })；$('#itemCount ')。文本(itemCount)；$('#qtyCount ')。文本(qtyTotal)；$('#priceTotal ')。文本(price total . tofixed(2))；};计算购物车的汇总信息时，要遍历购物车中的所有行，分别累加每一行的小计和数量。这里，使用了一个技巧来获取所有的行$(cartTable)。在购物车表中查找(' tr:gt(0)')

这里使用的Tr:gt(0)表示选择了表中的所有Tr元素，并且索引大于0(即删除第一个tr元素)。为什么呢？回过头来看HTML代码，不难发现第一个tr元素是表的头部，不包含任何业务数据，所以遍历时应该去掉这个tr元素。

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

//提供点击事件进行-号量调整，重新计算产品小计/* *绑定购物车每行点击事件，绑定每行输入框键盘事件*根据触发事件的要素执行不同的动作*增加数量*减少数量*删除产品* */$(可搬运)。Find ('Tr:GT (0)')。每个(。//在数量输入框中增加一个事件，计算金额的小计，更新总金额$(输入)。keyup(function(){ var val=par sent($(this))。val())；if (isNaN(val) || (val 1)) { $(this)。val(' 1 ')；} getSubTotal($(this)。父项()。parent())；//tr元素getTotal()；});//增加数量调整按钮和删除的点击事件，计算金额小计，更新合计$(本)。click(function(){ var val=par sent($(input))。val())；if(ISnan(val)| |(val 1)){ val=1；} if ($(window.event.srcElement)。hasClass('减'){ if(val 1)val-；input . val(val)；getSubTotal(这个)；} else if($(window . event . srcelement)。has class(' plus '){ if(val 9999)val；input . val(val)；getSubTotal(这个)；} else if($(window . event . src element)。has class(' delete '){ if(confirm('您确定要从购物车中删除此产品吗？)){ $(这个)。移除()；} } GetTotal()；});我这里不是为事件绑定一对“增加”、“减少”和“删除”按钮，而是将点击事件统一绑定在TR线上，然后判断触发点击事件的元素，再决定执行什么动作。

当您点击" "或"-"按钮时，程序将增加或减少一个数量，并重新计算产品的小计和汇总信息。

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

至此，购物车前端开发结束。

朋友们可以通过以下链接获取源代码：https://github.com/chris-mao/ShoppingCart.git

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。