jQuery購物車是一個非常常見的用于網(wǎng)上商城的常規(guī)功能,它可以非常方便地幫助用戶往購物車中添加商品、修改商品數(shù)量、計算商品總價等等。這里提供一份完整的jQuery購物車代碼,大家可以通過此代碼進行實戰(zhàn)學習,達到更好的代碼理解和應(yīng)用能力提升。
var goodsList = [];//商品列表 var total = 0;//總金額 //初始化數(shù)據(jù) function initList(){ goodsList = [ {id: 1, name: 'T恤衫', price: 58.0, num: 1}, {id: 2, name: '牛仔褲', price: 80.0, num: 2}, {id: 3, name: '帆布鞋', price: 120.0, num: 1}, ]; } //刷新購物車列表 function refreshList(){ var html = ''; for(var i=0;i<goodsList.length;i++){ html += '<tr>'; html += '<td>'+goodsList[i].id+'</td>'; html += '<td>'+goodsList[i].name+'</td>'; html += '<td>'+goodsList[i].price+'</td>'; html += '<td><input type="number" min="1" value="'+goodsList[i].num+'" onchange="changeNum('+goodsList[i].id+',this.value)"></td>'; html += '<td>'+goodsList[i].price*goodsList[i].num+'</td>'; html += '</tr>'; total += goodsList[i].price*goodsList[i].num; } $('#goods-list').html(html); $('#total').html(total); } //添加商品到購物車 function addGoods(id){ var flag = false; for(var i=0;i<goodsList.length;i++){ if(goodsList[i].id == id){ goodsList[i].num++; flag = true; break; } } if(!flag){ var goods = {id: id, name: '測試商品', price: 88.0, num: 1}; goodsList.push(goods); } refreshList(); } //修改商品數(shù)量 function changeNum(id,num){ for(var i=0;i<goodsList.length;i++){ if(goodsList[i].id == id){ goodsList[i].num = num; break; } } refreshList(); } //初始化頁面 function initPage(){ initList(); refreshList(); } //入口函數(shù) $(function(){ initPage(); });
以上代碼分別包含了初始化數(shù)據(jù)(initList)、刷新購物車列表(refreshList)、商品添加功能(addGoods)、商品數(shù)量修改功能(changeNum)、初始化頁面(initPage)等幾個主要功能。這些功能結(jié)合起來可以完成一個較為完整的購物車實例。代碼中使用了許多jQuery的語法和方法,比如選擇器、屬性設(shè)置、html內(nèi)容設(shè)置等等,同時也使用了一些JavaScript原生方法進行功能實現(xiàn)。
總之,通過此代碼的學習,我們可以更好地掌握jQuery的語法和應(yīng)用方法,以及熟悉更多的網(wǎng)頁開發(fā)思路和問題解決方法。
上一篇css怎么弄文件
下一篇css怎么把圖片滿屏