购物车jquery,购物车简介

jQuery购物车提醒问题

script

创新互联成立于2013年，我们提供高端成都网站建设、成都网站制作公司、成都网站设计、网站定制、营销型网站、小程序制作、微信公众号开发、seo优化服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为成都格栅板企业提供源源不断的流量和订单咨询。

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怎么实现

两种办法，一种是存到cookie，一种是存到数据库。淘宝的购物车，是存到数据库的。

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

最终效果图: