這篇文章主要講解了“jQuery怎么模擬實(shí)現(xiàn)淘寶購物車功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jQuery怎么模擬實(shí)現(xiàn)淘寶購物車功能”吧！

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)興化,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

首先我們要實(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();
  });
 }

感謝各位的閱讀，以上就是“jQuery怎么模擬實(shí)現(xiàn)淘寶購物車功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對jQuery怎么模擬實(shí)現(xiàn)淘寶購物車功能這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

分享標(biāo)題：jQuery怎么模擬實(shí)現(xiàn)淘寶購物車功能-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/pohsi.html