jQuery購物車提醒問題

script

目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)絡空間、網(wǎng)站托管、企業(yè)網(wǎng)站設計、江安網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

jQuery(function($)?{

$("#add").on("click",?function()?{

var?boxs?=?$(":checkbox[name='haitai']:checked");

if?(!boxs.length)?{

alert("請選擇商品！");

}?else?{

var?bao?=?"";

boxs.each(function(i,?dom)?{

bao?+=?$(dom).attr("value")?+?"\n";

});

localStorage.car?=?localStorage.car???bao?+?localStorage.car?:?bao;

alert("成功加入購物車！");

}

});

});

/script

如何用jquery寫多個購物車的數(shù)量曾減，我用jquery寫了但只第一個購物車增減有用，其它的無效，代碼如下：

這個時候就像前面大哥說的 不能用id來表示了 可以用class

還有你的這個結構是不規(guī)范的 id一個頁面只能是唯一的

為了不同時改變 其他的購物車的數(shù)量 可以來找到相對的

這個結構：

div

p單價：3.95/p

input class="min" name="" type="button" value="-" /

input class="text_box" name="" type="text" value="4" /

inputclass="add" name="" type="button" value="+" /

p總價：label class="total"/label/p

/div

div

p單價：3.95/p

input class="min" name="" type="button" value="-" /

input class="text_box" name="" type="text" value="4" /

input class="add" name="" type="button" value="+" /

p總價：label class="total"/label/p

/div

把每個購物車用一個div包起來

js:

$(function(){

//var t = $("#text_box");

$(".add").click(function(){

var t= $(this).parent().find(".text_box"); //根據(jù)這個來找到它相對的元素 當然也可以直接 //$(this).prev(); 這個直接來找到

t.val(parseint(t.val()+1);

setTotal($(this),t.val());

})

$(".min").click(function(){

var t= $(this).parent().find(".text_box"); //根據(jù)這個來找到它相對的元素 當然也可以直接 //$(this).next(); 這個直接來找到

t.val(parseint(t.val()-1);

setTotal($(this),t.val());

})

function setTotal(obj,number){

var total=number*$(obj).parent().find("p:first").text(); //這里算出總價

$(obj)).parent().find("total").html(total.toFixed(2));

}

// setTotal();

})

給一個建議 以后要想做好東西 布局一定要好

一個好的結構 才能讓你任意操作

jquery 實現(xiàn)加入購物車功能

參考以下代碼：

注意需要導入jquery.js.

!DOCTYPE?html??

html??

head??

title購物車----jQuery/title??

meta?charset="utf-8"?/??

style?type="text/css"??

h1?{??

text-align:center;??

}??

table?{??

margin:0?auto;??

width:60%;??

border:2px?solid?#aaa;??

border-collapse:collapse;??

}??

table?th,?table?td?{??

border:2px?solid?#aaa;??

padding:5px;??

}??

th?{??

background-color:#eee;??

}??

/style??

script?type="text/javascript"?src="./js/jquery.js"/script??

script?type="text/javascript"??

function?add_shoppingcart(btn){//將btn(dom)轉換為jQuery對象??

//先獲取商品名字和單價還有庫存以備后面使用??

var?$tds?=?$(btn).parent().siblings();??

//$tds.eq(0)是jQuery對象??$tds[0]是DOM對象??

var?name?=?$tds.eq(0).html();//string??

var?price?=?$tds.eq(1).html();//string??

var?stock?=?$tds.eq(3).html();//string??

//查看庫存是否還有=0??

if(stock?=?0){??

return;?????

}??

//無論購物車中是否有該商品,庫存都要-1??

$tds.eq(3).html(--stock);??

//在添加之前確定該商品在購物車中是否存在,若存在,則數(shù)量+1,若不存在則創(chuàng)建行??

var?$trs?=?$("#goodstr");??

for(var?i=0;i$trs.length;i++){??

var?$gtds?=?$trs.eq(i).children();??

var?gName?=?$gtds.eq(0).html();??

if(name?==?gName){//若存在??

var?num?=?parseInt($gtds.eq(2).children().eq(1).val());??

$gtds.eq(2).children().eq(1).val(++num);//數(shù)量+1??

//金額從新計算??

$gtds.eq(3).html(price*num);??

return;//后面代碼不再執(zhí)行??

}??

}??

//若不存在,創(chuàng)建后追加??

var?li?=??

"tr"+??

"td"+name+"/td"+??

"td"+price+"/td"+??

"td?align='center'"+??

"input?type='button'?value='-'?onclick='decrease(this);'/?"+??

"input?type='text'?size='3'?readonly?value='1'/?"+??

"input?type='button'?value='+'?onclick='increase(this);'/"+??

"/td"+??

"td"+price+"/td"+??

"td?align='center'"+??

"input?type='button'?value='x'?onclick='del(this);'/"+??

"/td"+??

"/tr";??

//追加到#goods后面??

$("#goods").append($(li));??

//總計功能??

total();??

}??

//輔助方法--單擊購物車中的"+"??"-"??"x"按鈕是找到相關商品所在td,以jQuery對象返回??

function?findStock(btn){??

var?name?=?$(btn).parent().siblings().eq(0).html();//獲取商品名字??

//注意table默認有行分組,若此處使用?$("#table1tr:gt(0)")則找不到任何tr??

var?$trs?=?$("#table1tbodytr:gt(0)");??

for(var?i=0;i$trs.length;i++){??

var?fName?=?$trs.eq(i).children().eq(0).html();??

if(name?==?fName){//找到匹配的商品??

return?$trs.eq(i).children().eq(3);??

}??

}??

}??

//增加"+"功能??

function?increase(btn){??

//獲取該商品庫存看是否=0??

var?$stock?=?findStock(btn);??

var?stock?=?$stock.html();??

if(stock?=?0){??

return;??

}??

//庫存-1????

$stock.html(--stock);??

//購物車數(shù)據(jù)改變??

var?$td?=?$(btn).prev();??

var?num?=?parseInt($td.val());//number??

//num此時為number類型(在計算時會自動轉換為number類型)??

$td.val(++num);??

//獲取單價,再加計算前要先轉換為number類型??

var?price?=?parseInt($(btn).parent().prev().html());??

$(btn).parent().next().html(num*price);??

//總計功能??

total();??

}??

//減少"-"功能??

function?decrease(btn){??

//該商品數(shù)量=1時候不能再減少??

var?num?=?parseInt($(btn).next().val());??

if(num?=?1){??

return;?????

}??

var?$stock?=?findStock(btn);??

//庫存+1??

var?stock?=?$stock.html();??

$stock.html(++stock);??

//商品數(shù)量-1??

$(btn).next().val(--num);??

//從新計算金額??

var?price?=?parseInt($(btn).parent().prev().html());??

$(btn).parent().next().html(price*num);??

//總計功能??

total();??

}??

//"x"刪除按鈕功能??

function?del(btn){??

//將商品數(shù)量歸還庫存??

var?$stock?=?findStock(btn);??

var?stock?=?parseInt($stock.html());??

var?num?=?parseInt($(btn).parent().prev().prev().children().eq(1).val());??

$stock.html(num?+?stock);??

//清空改行商品列表??

$(btn).parent().parent().remove();??

//總計功能??

total();??

}??

//總計功能??

function?total(){??

//獲取所有購物車中的trs??

var?$trs?=?$("#goods?tr");??

var?amount?=?0;??

for(var?i=0;i$trs.length;i++){??

var?money?=?parseInt($trs.eq(i).children().eq(3).html());??

amount?+=?money;??

}??

//寫入總計欄??

$("#total").html(amount);??

}??

/script??

/head??

body??

h1真劃算/h1??

table?id="table1"??

tr??

th商品/th??

th單價(元)/th??

th顏色/th??

th庫存/th??

th好評率/th??

th操作/th??

/tr?????

tr??

td羅技M185鼠標/td??

td80/td??

td黑色/td??

td5/td??

td98%/td??

td?align="center"??

input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td微軟X470鍵盤/td??

td150/td??

td黑色/td??

td9028/td??

td96%/td??

td?align="center"??

input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td洛克iphone6手機殼/td??

td60/td??

td透明/td??

td672/td??

td99%/td??

td?align="center"??

input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td藍牙耳機/td??

td100/td??

td藍色/td??

td8937/td??

td95%/td??

td?align="center"??

input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td金士頓U盤/td??

td70/td??

td紅色/td??

td482/td??

td100%/td??

td?align="center"??

input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

/table??

h1購物車/h1??

table??

thead??

tr??

th商品/th??

th單價(元)/th??

th數(shù)量/th??

th金額(元)/th??

th刪除/th??

/tr??

/thead??

tbody?id="goods"??

/tbody??

tfoot??

tr??

td?colspan="3"?align="right"總計/td??

td?id="total"/td??

td/td??

/tr??

/tfoot??

/table??????

/body??

/html

最終效果圖:

Jquery中怎么在購物車上顯示數(shù)量

把外面的a設為相對定位。里面再絕對定位一個元素......然后寫樣式就好了

本文標題：jquery購物車,jquery購物車全選代碼
分享路徑：http://chinadenli.net/article26/dsedsjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)頁設計公司、網(wǎng)站設計、網(wǎng)站策劃、品牌網(wǎng)站制作、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)