这篇文章主要讲解了“jQuery怎么模拟实现淘宝购物车功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jQuery怎么模拟实现淘宝购物车功能”吧！
首先我们要实现的内容的需求有如下几点：
1.在购物车页面中，当选中“全选”复选框时，所有商品前的复选框被选中，否则所有商品的复选框取消选中。
2.当所有商品前的复选框选中时，“全选”复选框被选中，否则“全选”复选框取消选中。
3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变。
4.单击图标+的时候数量增加并且商品总价与积分随之改变。
5.单击删除所选将删除用户选中商品，单击删除则删除该商品即可并达到商品总价与积分随之改变。
下面我们就开始进入代码:
$(function () {
subtotal();
addorminus();
allcheckbox();
delet();
deleselect();
});
//设置 获取积分和一共金额函数
function countmoney() {
var money = 0; //总金额
var jifen = 0; //总积分
$(".cart_td_7").each(function () {
var m = $(this).text();
money += Number(m);
var j = $(this).siblings(".cart_td_4").text();
var number = $(this).siblings(".cart_td_6").children("input").val();
jifen += Number(j * number);
});
$("#total").html(money);
$("#integral").html(jifen);
}
//小计
function subtotal() {
var obj = $(".cart_td_7");
obj.each(function () { //each遍历每一个clss为.card_td_7的元素
var num = $(this).siblings(".cart_td_6").children("input").val(); //购物车 选中的当前数量
var price = $(this).siblings(".cart_td_5").html(); //当前选中物品的price
var money = num * price; //小计
$(this).html(money);
});
countmoney();
}
//添加或减少数量
function addorminus() {
$(".hand").on("click", function () {
var num;
if ($(this).attr("alt") == "minus") {
num = $(this).next().val();
if (num == 1) {
$(this).css("display", "none");
} else {
$(this).next().val(--num);
}
} else {
num = $(this).prev().val();
$(this).prev().val(++num);
if (num == 1) {
$(this).siblings("[alt==minus]").css("display", "visible");
} else { }
}
subtotal();
});
}
//全选或者全不选
function allcheckbox() {
$("#allCheckBox").live("change", function () {
if ($(this).attr("checked") == "checked") {
$("[name=cartCheckBox]").attr("checked", "checked");
} else {
$("[name=cartCheckBox]").attr("checked", false);
}
});
$("[name=cartCheckBox]").live("change", function () {
var bool = true;
$("[name=cartCheckBox]").each(function () {
if ($(this).attr("cheked") != "checked") {
bool = false;
}
});
if (bool) {
$("#allCheckBox").attr("checked", "checked");
} else {
$("#allCheckBox").attr("checked", false);
}
});
}
//删除
function delet() {
$(".cart_td_8>a").live("click", function () {
$(this).parent().parent().prev().remove();
$(this).parent().parent().remove();
subtotal();
});
}
//删除所选
function deleselect() {
$("#deleteAll>img").live("click", function () {
$("[name=cartCheckBox]").each(function () {
if ($(this).attr("checked") == "checked") {
$(this). parent().parent().prev().remove();
$(this).parent().parent().remove();
}
});
subtotal();
});
}感谢各位的阅读，以上就是“jQuery怎么模拟实现淘宝购物车功能”的内容了，经过本文的学习后，相信大家对jQuery怎么模拟实现淘宝购物车功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！