使用jQuery实现简单的购物车功能
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;
}
//页面加载后执行
$(function(){
//为添加购物车按钮注册点击事件
$("input[type='button'][value='加入购物车']").click(function(){
var productName = $(this).parent().siblings("td:first").text();
var price = $(this).parent().siblings("td:eq(1)").text();
//判断库存
var stockTd = $(this).parent().siblings("td:eq(3)");
var stock = stockTd.text();
if (stock == 0) {
alert("已售完..")
return;
} else {
stockTd.text(parseInt(stock)-1);
}
//判断是否重复添加
var flag = false; // 不重复
$(".productName").each(function(){
var name = $(this).text();
if (name == productName) { //重复了
//修改数量
var input = $(this).siblings("td:eq(1)").find("input:eq(1)");
var oldNum = input.val();
var newNum = parseInt(oldNum)+1;
input.val(newNum);
//修改金额
$(this).siblings("td:eq(2)").text(parseFloat(price)*newNum);
//计算总金额
totalMoney();
flag = true; //重复了
}
});
if(flag) {
return;
}
//组装一条数据
var html = '
'
'
'
''+
''+
''+
'
'
'
'
$("#goods").append(html);
//计算总金额
totalMoney();
});
});
//计算总金额
function totalMoney() {
var money = 0;
$(".moneyTd").each(function(){
money += parseFloat($(this).text());
});
$("#total").text(money);
}
//修改商品数据及金额
function changeNum(num, btn) {
//修改库存
//获取购物车中的商品名称
var productName = $(btn).parent().siblings("td:first").text();
//获取购物车中商品数量
var input = $(btn).parent().find("input:eq(1)");
var oldNum =parseInt( input.val()) ;
//标记
var flag = true; //是否还有库存
$("[name='productName']").each(function(){
var pname = $(this).text();
//当名称相同时执行操作
if (productName == pname) {
//获取库存中商品数量
var stockTd = $(this).siblings("td:eq(2)");
var stock = stockTd.text();
//当库存为0时,不能再添加了
if (stock == 0 && num ==1) {
flag = false; //没有库存
} else if(oldNum == 1 && num ==-1){
flag = false; //没有库存
}else{
//改变库存数量
stockTd.text(parseInt(stock)-num);
}
}
});
if(!flag) {
return;
}
//当购物车中数量为0时,便不在减少
if(oldNum == 0&& num ==-1 ){
return ;
}else{
var newNum = parseInt(oldNum)+num;
input.val(newNum);
}
var tr = $(btn).parent().parent();
var price = tr.find("td:eq(1)").text();
tr.find("td:eq(3)").text(parseFloat(price)*newNum);
//计算总金额
totalMoney();
}
//删除商品
function del(btn) {
if (confirm("确认删除此商品?")) {
$(btn).parent().parent().remove();
//获取购物车中的商品名称
var productName = $(btn).parent().siblings("td:first").text();
//获取购物车中商品数量
var input = $(btn).parent().siblings("td:eq(2)").find("input:eq(1)");
var Num = parseInt( input.val()) ;
$("[name='productName']").each(function(){
var pname = $(this).text();
//当名称相同时执行操作
if (productName == pname) {
//获取库存中商品数量
var stockTd = $(this).siblings("td:eq(2)");
var stock = stockTd.text();
//改变库存数量
stockTd.text(parseInt(stock)+Num);
}
});
}
//计算总金额
totalMoney();
}
真划算
商品 | 单价(元) | 颜色 | 库存 | 好评率 | 操作 |
---|---|---|---|---|---|
罗技M185鼠标 | 80 | 黑色 | 6 | 98% |
|
微软X470键盘 | 150 | 黑色 | 7 | 96% |
|
洛克iphone6手机壳 | 60 | 透明 | 8 | 99% |
|
蓝牙耳机 | 100 | 蓝色 | 10 | 95% |
|
金士顿U盘 | 70 | 红色 | 9 | 100% |
|
购物车
商品 | 单价(元) | 数量 | 金额(元) | 删除 |
---|---|---|---|---|
总计 | 0 |
推荐阅读
发表评论