四川盐亭网站制作公司

jquery商品,jquery商品介绍规格与包装

jquery 点击商品，价格和库存也相应的发生变化

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

为新华等地区用户提供了全套网页设计制作服务，及新华网站建设行业解决方案。主营业务为成都做网站、成都网站设计、新华网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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)"//td

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

td删除/td

/tr

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

上面是我根据你的描述，进行了适当修改后的片段~~

基本原理就是对表格中的总价列进行了累加计算，最后写到 ”商品总金额“的位置。

jquery 实现加入购物车功能

参考以下代码：

注意需要导入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);  

//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行  

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);//数量+1  

//金额从新计算  

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

return;//后面代码不再执行  

}  

}  

//若不存在,创建后追加  

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

//购物车数据改变  

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){  

//该商品数量=1时候不能再减少  

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

if(num = 1){  

return;     

}  

var $stock = findStock(btn);  

//库存+1  

var stock = $stock.html();  

$stock.html(++stock);  

//商品数量-1  

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

//从新计算金额  

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

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

//总计功能  

total();  

}  

//"x"删除按钮功能  

function del(btn){  

//将商品数量归还库存  

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数量/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或JS实现商品加入对比的代码

你好！

页面中显示的楼盘对比的导航，其中js有这样一段代码：

script

.....

init_comp_bar();

.....

/script

其中:

function init_comp_bar() {

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

set_fixed_position();

initCompareBar();

show_change(0);

setInterval(initCompareBar, 2000);    //此句为关键

}

而这个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();

}

希望对你有帮助！！

jquery怎么把商品数据传到接口

不是很明白？你想把前台的json传给后台吗？

如果是，加多个参数dataType:json,data:json_data,

即json_data = {

"pwd" : "password" // 可选

"address":"xxxxx,张三", //联系人 和收货地址放在一起

"mobile":"123456789",

"email":"email123@QQ.com"

};

希望能够帮到你！


本文标题：jquery商品,jquery商品介绍规格与包装
转载来源：http://scyanting.com/article/dsiooed.html

其他资讯