jQuery实现一个简单的购物车功能
Posted smile_bai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现一个简单的购物车功能相关的知识，希望对你有一定的参考价值。
最近由于工作需要的原因，开始系统学习jQuery的知识，然后跟着一个视频教程做了一个购物车的功能，现总结如下。
第一步：准备html页面，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <title>购物车</title> <style type="text/css"> h1{ text-align:center} table{ margin:0 auto; width:60%; border:2px solid #09C; border-collapse:collapse} table th,table td{ border:2px solid #09C; padding:5px; } th{ background-color:#0CC;} </style> <script type="text/javascript"> </script> </head> <body> <h1>真划算</h1> <table> <tr> <th>商品</th> <th>单价</th> <th>颜色</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>罗技鼠标</td> <td>80</td> <td>黑色</td> <td>893</td> <td>98%</td> <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> </tr> <tr> <td>微软键盘</td> <td>150</td> <td>黑色</td> <td>100</td> <td>98%</td> <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> </tr> <tr> <td>手机壳</td> <td>60</td> <td>透明</td> <td>200</td> <td>98%</td> <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> </tr> <tr> <td>耳机</td> <td>100</td> <td>蓝色</td> <td>302</td> <td>98%</td> <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td> </tr> </table> <h1>购物车</h1> <table> <thead> <tr> <td>商品</td> <td>单价</td> <td>数量</td> <td>金额</td> <td>删除</td> </tr> </thead> <tbody id="goods"> <!-- <tr> <td>罗技鼠标</td> <td>80</td> <td> <input type="button" value="-"/> <input type="text" size="3" readonly="readonly"/> <input type="button" value="+"/> </td> <td>80</td> <td align="center"> <input type="button" value="*"/> </td> </tr>--> </tbody> <tfoot> <tr> <td colspan="3" align="right">总计</td> <td></td> <td></td> </tr> </tfoot> </table> </body> </html>
第二步：实现增加物品的功能代码：
<script type="text/javascript"> function addShopping(btn){ var tds=$(btn).parent().siblings();//获取当前元素的父节点的全部兄弟节点，就是当前这行的所有td var name=$(tds).eq(0).text();//获取商品名称的td的文本值 var price=$(tds).eq(1).text();//获取商品价格的td的文本值 var html = $("<tr>" //开始拼接HTML元素，将取到的东西展示到对用的input中 +"<td>"+name+"</td>" +"<td>"+price+"</td>" +"<td>" +"<input type=\'button\' value=\'-\'/>" +"<input type=\'text\' size=\'3\' readonly=\'readonly\'/>" +"<input type=\'button\' value=\'+\'/>" +"</td>" +"<td>"+price+"</td>" +"<td align=\'center\'>" +"<input type=\'button\' value=\'*\'/>" +"</td></tr>"); $("#goods").append(html); }
第三步：实现将购物车中的物品删除的基本功能
function deletShopping(btn){//给上一步你拼接的删除按钮上绑定一个这样的方法
$(btn).parent().parent().remove();
}
第四步：增加物品和删除物品的基本功能完成以后，我们就要开始处理细节问题了，同一件物品的增加或者减少
function increas(btn){ var text=$(btn).prev(); var acount = parseInt($(text).val()); $(text).val(++acount); //获取单价 var tds = $(text).parent().siblings(); var price = parseInt($(tds).eq(1).text()); //获取总价 var sum = price*acount; $(tds).eq(2).text(sum); } function decrease(btn){ var text=$(btn).next(); var acount = parseInt($(text).val()); $(text).val(--acount); if(acount<1){ return; } //获取单价 var tds = $(text).parent().siblings(); var price = parseInt($(tds).eq(1).text()); //获取总价 var sum = price*acount $(tds).eq(2).text(sum); }
最后，算所有商品合计：
function total(){ var trs = $("#goods tr"); var sum=0; for(var i=0;i<trs.length;i++){ var td = trs.eq(i).children().eq(3); var price = parseInt($(td).text()); //alert(price); sum = sum + price; } $("#total").text(sum); }
然后将total方法放在前四个方法后面，每次事件触发都要调用合计的方法。
好了，到这里呢，一个简单的购物车功能就做完了，最后附图一张，大功告成！
以上是关于jQuery实现一个简单的购物车功能的主要内容，如果未能解决你的问题，请参考以下文章
jquery实现添加到购物车拖放功能 像百度旅游定制旅游一样 如下图