jQuery實現一個簡單的購物車功能
阿新 • • 發佈：2017-09-03
名稱 展示 -1 set margin for button ans return
最近由於工作需要的原因，開始系統學習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實現一個簡單的購物車功能