jQuery購(gòu)物車提醒問題

script

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

jQuery(function($)?{

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

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

if?(!boxs.length)?{

alert("請(qǐng)選擇商品！");

}?else?{

var?bao?=?"";

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

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

});

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

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

}

});

});

/script

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

這個(gè)時(shí)候就像前面大哥說的 不能用id來表示了 可以用class

還有你的這個(gè)結(jié)構(gòu)是不規(guī)范的 id一個(gè)頁(yè)面只能是唯一的

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

這個(gè)結(jié)構(gòu)：

div

p單價(jià)：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總價(jià)：label class="total"/label/p

/div

div

p單價(jià)：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總價(jià)：label class="total"/label/p

/div

把每個(gè)購(gòu)物車用一個(gè)div包起來

js:

$(function(){

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

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

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

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

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

})

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

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

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

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

})

function setTotal(obj,number){

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

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

}

// setTotal();

})

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

一個(gè)好的結(jié)構(gòu) 才能讓你任意操作

jquery 實(shí)現(xiàn)加入購(gòu)物車功能

參考以下代碼：

注意需要導(dǎo)入jquery.js.

!DOCTYPE?html??

html??

head??

title購(gòu)物車----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)轉(zhuǎn)換為jQuery對(duì)象??

//先獲取商品名字和單價(jià)還有庫(kù)存以備后面使用??

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

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

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

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

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

//查看庫(kù)存是否還有=0??

if(stock?=?0){??

return;?????

}??

//無(wú)論購(gòu)物車中是否有該商品,庫(kù)存都要-1??

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

//在添加之前確定該商品在購(gòu)物車中是否存在,若存在,則數(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??

//金額從新計(jì)算??

$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));??

//總計(jì)功能??

total();??

}??

//輔助方法--單擊購(gòu)物車中的"+"??"-"??"x"按鈕是找到相關(guān)商品所在td,以jQuery對(duì)象返回??

function?findStock(btn){??

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

//注意table默認(rèn)有行分組,若此處使用?$("#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){??

//獲取該商品庫(kù)存看是否=0??

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

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

if(stock?=?0){??

return;??

}??

//庫(kù)存-1????

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

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

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

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

//num此時(shí)為number類型(在計(jì)算時(shí)會(huì)自動(dòng)轉(zhuǎn)換為number類型)??

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

//獲取單價(jià),再加計(jì)算前要先轉(zhuǎn)換為number類型??

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

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

//總計(jì)功能??

total();??

}??

//減少"-"功能??

function?decrease(btn){??

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

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

if(num?=?1){??

return;?????

}??

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

//庫(kù)存+1??

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

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

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

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

//從新計(jì)算金額??

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

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

//總計(jì)功能??

total();??

}??

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

function?del(btn){??

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

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();??

//總計(jì)功能??

total();??

}??

//總計(jì)功能??

function?total(){??

//獲取所有購(gòu)物車中的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;??

}??

//寫入總計(jì)欄??

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

}??

/script??

/head??

body??

h1真劃算/h1??

table?id="table1"??

tr??

th商品/th??

th單價(jià)(元)/th??

th顏色/th??

th庫(kù)存/th??

th好評(píng)率/th??

th操作/th??

/tr?????

tr??

td羅技M185鼠標(biāo)/td??

td80/td??

td黑色/td??

td5/td??

td98%/td??

td?align="center"??

input?type="button"?value="加入購(gòu)物車"?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="加入購(gòu)物車"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td洛克iphone6手機(jī)殼/td??

td60/td??

td透明/td??

td672/td??

td99%/td??

td?align="center"??

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

/td??

/tr??

tr??

td藍(lán)牙耳機(jī)/td??

td100/td??

td藍(lán)色/td??

td8937/td??

td95%/td??

td?align="center"??

input?type="button"?value="加入購(gòu)物車"?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="加入購(gòu)物車"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

/table??

h1購(gòu)物車/h1??

table??

thead??

tr??

th商品/th??

th單價(jià)(元)/th??

th數(shù)量/th??

th金額(元)/th??

th刪除/th??

/tr??

/thead??

tbody?id="goods"??

/tbody??

tfoot??

tr??

td?colspan="3"?align="right"總計(jì)/td??

td?id="total"/td??

td/td??

/tr??

/tfoot??

/table??????

/body??

/html

最終效果圖:

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

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

本文標(biāo)題：jquery購(gòu)物車,jquery購(gòu)物車全選代碼
分享路徑：http://jinyejixie.com/article26/dsedsjg.html

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

廣告

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