jQuery模擬淘寶購(gòu)物車(chē)功能
首先我們要實(shí)現(xiàn)的內(nèi)容的需求有如下幾點(diǎn):
1.在購(gòu)物車(chē)頁(yè)面中,當(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à)與積分隨之改變。
下面我們就開(kāi)始進(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(); //購(gòu)物車(chē) 選中的當(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(); }); }
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
jQuery div層的放大與縮小簡(jiǎn)單實(shí)現(xiàn)代碼
div層的放大與縮小想必大家已不是那么陌生了吧,接下來(lái)為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn),感興趣的各位可以參考下哈,希望可以幫助到你2013-03-03Jquery數(shù)字上下滾動(dòng)動(dòng)態(tài)切換插件
有時(shí)我們需要?jiǎng)討B(tài)的展示訪問(wèn)次數(shù)、下載次數(shù)等效果,我們可以借助jQuery結(jié)合后臺(tái)php實(shí)現(xiàn)一個(gè)滾動(dòng)的數(shù)字展示效果。2015-08-08jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)高亮,同時(shí)其他同級(jí)元素變暗的效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)高亮,同時(shí)其他同級(jí)元素變暗的效果,涉及jQuery基于事件響應(yīng)機(jī)制的頁(yè)面元素遍歷與屬性變換操作技巧,需要的朋友可以參考下2016-09-09jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過(guò)2013-12-12使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁(yè)
這篇文章主要介紹了使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁(yè),使用異步controller與jQuery按需加載內(nèi)容,當(dāng)用戶開(kāi)始通過(guò)網(wǎng)站的內(nèi)容滾動(dòng)時(shí)進(jìn)一步加載內(nèi)容。,需要的朋友可以參考下2019-06-06jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫(huà)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫(huà)效果,通過(guò)jquery鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁(yè)面元素的漸變折疊與展開(kāi)功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08