jQuery模擬淘寶購物車功能
首先我們要實(shí)現(xiàn)的內(nèi)容的需求有如下幾點(diǎn):
1.在購物車頁面中,當(dāng)選中“全選”復(fù)選框時(shí),所有商品前的復(fù)選框被選中,否則所有商品的復(fù)選框取消選中。
2.當(dāng)所有商品前的復(fù)選框選中時(shí),“全選”復(fù)選框被選中,否則“全選”復(fù)選框取消選中。
3.單擊圖標(biāo)-的時(shí)候數(shù)量減一而且不能讓物品小于0并且商品總價(jià)與積分隨之改變。
4.單擊圖標(biāo)+的時(shí)候數(shù)量增加并且商品總價(jià)與積分隨之改變。
5.單擊刪除所選將刪除用戶選中商品,單擊刪除則刪除該商品即可并達(dá)到商品總價(jià)與積分隨之改變。
下面我們就開始進(jìn)入代碼:
$(function () {
subtotal();
addorminus();
allcheckbox();
delet();
deleselect();
});
//設(shè)置 獲取積分和一共金額函數(shù)
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);
}
//小計(jì)
function subtotal() {
var obj = $(".cart_td_7");
obj.each(function () { //each遍歷每一個(gè)clss為.card_td_7的元素
var num = $(this).siblings(".cart_td_6").children("input").val(); //購物車 選中的當(dāng)前數(shù)量
var price = $(this).siblings(".cart_td_5").html(); //當(dāng)前選中物品的price
var money = num * price; //小計(jì)
$(this).html(money);
});
countmoney();
}
//添加或減少數(shù)量
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();
});
}
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
jQuery div層的放大與縮小簡單實(shí)現(xiàn)代碼
div層的放大與縮小想必大家已不是那么陌生了吧,接下來為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn),感興趣的各位可以參考下哈,希望可以幫助到你2013-03-03
Jquery數(shù)字上下滾動(dòng)動(dòng)態(tài)切換插件
有時(shí)我們需要?jiǎng)討B(tài)的展示訪問次數(shù)、下載次數(shù)等效果,我們可以借助jQuery結(jié)合后臺(tái)php實(shí)現(xiàn)一個(gè)滾動(dòng)的數(shù)字展示效果。2015-08-08
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)高亮,同時(shí)其他同級元素變暗的效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)高亮,同時(shí)其他同級元素變暗的效果,涉及jQuery基于事件響應(yīng)機(jī)制的頁面元素遍歷與屬性變換操作技巧,需要的朋友可以參考下2016-09-09
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過2013-12-12
使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁,使用異步controller與jQuery按需加載內(nèi)容,當(dāng)用戶開始通過網(wǎng)站的內(nèi)容滾動(dòng)時(shí)進(jìn)一步加載內(nèi)容。,需要的朋友可以參考下2019-06-06
jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫效果
這篇文章主要介紹了jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫效果,通過jquery鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁面元素的漸變折疊與展開功能,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08

