购物车jquery,购物车图标

如何用jquery写多个购物车的数量曾减，我用jquery写了但只第一个购物车增减有用，其它的无效，代码如下：

这个时候就像前面大哥说的不能用id来表示了可以用class

为企业提供成都网站建设、网站设计、网站优化、成都全网营销推广、竞价托管、品牌运营等营销获客服务。成都创新互联公司拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！

还有你的这个结构是不规范的 id一个页面只能是唯一的

为了不同时改变其他的购物车的数量可以来找到相对的

这个结构：

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"); //根据这个来找到它相对的元素当然也可以直接 //$(this).prev(); 这个直接来找到

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

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

})

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

var t= $(this).parent().find(".text_box"); //根据这个来找到它相对的元素当然也可以直接 //$(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 实现加入购物车功能

参考以下代码：

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

th商品/th

th单价(元)/th

th颜色/th

th库存/th

th好评率/th

th操作/th

/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

td微软X470键盘/td

td150/td

td黑色/td

td9028/td

td96%/td

td align="center"

input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/

/td

/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

td蓝牙耳机/td

td100/td

td蓝色/td

td8937/td

td95%/td

td align="center"

input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/

/td

/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

th商品/th

th单价(元)/th

th数量/th

th金额(元)/th

th删除/th

/tr

/thead

tbody id="goods"

/tbody

tfoot

td colspan="3" align="right"总计/td

td id="total"/td

td/td

/tr

/tfoot

/table

/body

/html

最终效果图:

jQuery购物车提醒问题

script

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,购物车图标
文章转载：https://www.cdcxhl.com/article4/dscieoe.html

成都网站建设公司_创新互联，为您提供建站公司、品牌网站制作、品牌网站设计、App开发、自适应网站、外贸网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容