jQuery模擬淘寶購物車功能
首先我們要實現(xiàn)的內(nèi)容的需求有如下幾點:
1.在購物車頁面中,當選中“全選”復(fù)選框時,所有商品前的復(fù)選框被選中,否則所有商品的復(fù)選框取消選中。
2.當所有商品前的復(fù)選框選中時,“全選”復(fù)選框被選中,否則“全選”復(fù)選框取消選中。
3.單擊圖標-的時候數(shù)量減一而且不能讓物品小于0并且商品總價與積分隨之改變。
4.單擊圖標+的時候數(shù)量增加并且商品總價與積分隨之改變。
5.單擊刪除所選將刪除用戶選中商品,單擊刪除則刪除該商品即可并達到商品總價與積分隨之改變。
下面我們就開始進入代碼:
$(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); } //小計 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(); //購物車 選中的當前數(shù)量 var price = $(this).siblings(".cart_td_5").html(); //當前選中物品的price var money = num * price; //小計 $(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)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
jQuery實現(xiàn)鼠標經(jīng)過時高亮,同時其他同級元素變暗的效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標經(jīng)過時高亮,同時其他同級元素變暗的效果,涉及jQuery基于事件響應(yīng)機制的頁面元素遍歷與屬性變換操作技巧,需要的朋友可以參考下2016-09-09jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象的具體實現(xiàn),感興趣的朋友不要錯過2013-12-12使用異步controller與jQuery實現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實現(xiàn)卷簾式分頁,使用異步controller與jQuery按需加載內(nèi)容,當用戶開始通過網(wǎng)站的內(nèi)容滾動時進一步加載內(nèi)容。,需要的朋友可以參考下2019-06-06