jquery 點(diǎn)擊商品，價(jià)格和庫(kù)存也相應(yīng)的發(fā)生變化

------------------javascript -------------------

為新華等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及新華網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、新華網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

function jia(id){

var t = $("#text_box_"+id);

var _price = parseInt($("#price_"+id).text());

var _val = parseInt(t.val())+1;

var result = (_val*_price).toFixed(2) ;

t.val(_val);

$("#total_"+id).html(result);

$("#totalmoney").html(getSum());

}

function getSum(){

var sum = 0;

$.each($("tdspan[id^='total_']"),function(){

var _val = parseFloat(this.innerText);

sum += _val;

})

return sum;

}

--------------------- html 片段---------------------

tr

tdspan class="b red" id="price_1"69/spanspan￥/span/td

tdimg src="../image/-.gif"align="absmiddle"onclick="jian(1)"/input id="text_box_1" name="count" type="text" class="put1" value="1"/img src="../image/-.gif" align="absmiddle" onclick="jia(1)"http://td

tdspan class="b red" id="total_1"69/spanspan￥/span/td

td刪除/td

/tr

------------------------------------------------

上面是我根據(jù)你的描述，進(jìn)行了適當(dāng)修改后的片段~~

基本原理就是對(duì)表格中的總價(jià)列進(jìn)行了累加計(jì)算，最后寫到 ”商品總金額“的位置。

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

}??

//無論購(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或JS實(shí)現(xiàn)商品加入對(duì)比的代碼

你好！

頁(yè)面中顯示的樓盤對(duì)比的導(dǎo)航，其中js有這樣一段代碼：

script

.....

init_comp_bar();

.....

/script

其中:

function?init_comp_bar()?{

............

set_fixed_position();

initCompareBar();

show_change(0);

setInterval(initCompareBar,?2000);????//此句為關(guān)鍵

}

而這個(gè)initCompareBar?就是讀取cookies并顯示的方法：

function?initCompareBar()?{

var?compCookie?=?Cookie.getCookie("wz_houseapp_compare");

if?(g_comp_cookie?==?compCookie)?{

return?false;

}?else?{

g_comp_cookie?=?compCookie;

}

if?(g_comp_cookie)?{

var?cookieArr?=?g_comp_cookie.split("||");

if?(cookieArr.length??2)?{

cmp_cont_change(0);

return?false;

}

var?cur_city?=?cookieArr[0];

if?(cur_city?!=?g_cur_city?||?cookieArr[1].length??2)?{

cmp_cont_change(0);

return?false;

}

var?cmp_arr?=?cookieArr[1].split("|");

var?cmp_len?=?cmp_arr.length;

if?(cmp_len??1)?{

cmp_cont_change(0);

return?false;

}

var?itemStr?=?"";

for?(var?i?=?0;?i??cmp_len;?i++)?{

var?house_info?=?cmp_arr[i].split(",");

itemStr?+=?'lispan?title="刪除"?onclick="removeCompareItem('?+?house_info[1]?+?')"刪除/span';

itemStr?+=?'a?href="'?+?cur_city?+?'_'?+?house_info[1]?+?'/"?target="_blank"?'?+?house_info[0]?+?'/a/li';

}

Fid("cmp_cont_item").innerHTML?=?itemStr;

cmp_cont_change(cmp_len);

}?else?{

cmp_cont_change(0);

}

setTopFrame();

}

希望對(duì)你有幫助！！

jquery怎么把商品數(shù)據(jù)傳到接口

不是很明白？你想把前臺(tái)的json傳給后臺(tái)嗎？

如果是，加多個(gè)參數(shù)dataType:json,data:json_data,

即json_data = {

"pwd" : "password" // 可選

"address":"xxxxx,張三", //聯(lián)系人 和收貨地址放在一起

"mobile":"123456789",

"email":"email123@QQ.com"

};

希望能夠幫到你！

分享名稱：jquery商品,jquery商品介紹規(guī)格與包裝
標(biāo)題路徑：http://chinadenli.net/article41/dsiooed.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、App設(shè)計(jì)、網(wǎng)站策劃、做網(wǎng)站、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(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)