初學(xué)者用jquery來(lái)寫(xiě)仿真的購(gòu)物車(chē)，確實(shí)有點(diǎn)惡心，那我們今天就把這萬(wàn)惡的購(gòu)物車(chē)剖析一下，來(lái)看看到底有什么難的.

?

購(gòu)物車(chē)的效果圖

那我們先從復(fù)選框開(kāi)始吧，廢話不多說(shuō)，上代碼！！

帶有序號(hào)的，都是一些分析！

?

1.全選或全不選效果

//點(diǎn)擊復(fù)選框全選或全不選效果$("#allCheckBox").click(function(){var checked=$(this).is(":checked"); //檢查這個(gè)集合里有沒(méi)有匹配的元素 返回true，false$(".cart_td_1").children().attr("checked",checked); //把上面的變量放在這邊來(lái)用 });//判斷是否全選function ifAllChecked(){var checkedBoxs=$(".cart_td_1").children(); //獲取到集合var sum=checkedBoxs.size(); //size() 與length() 返回的值是一樣的var k=0; //迭代變量//each是循環(huán)checkedBoxs.each(function(index,dom){ //index當(dāng)前對(duì)象的索引，或者是所有的對(duì)象的索引 dom當(dāng)前對(duì)象，或者是對(duì)象if($(dom).is(":checked")) k++; //匹配頁(yè)面上處于選中狀態(tài)的元素 });if(k==sum){ //當(dāng)我們拿出了input復(fù)選框的個(gè)數(shù)$("#allCheckBox").attr("checked",true); //如果為true的話，就改變值}else{$("#allCheckBox").attr("checked",false); //否則的話，我們也改變值 }}ifAllChecked();//頁(yè)面加載完后運(yùn)行//單選判斷$(".cart_td_1").children().click(function(){ifAllChecked(); });

當(dāng)我們解決了復(fù)選框的問(wèn)題后，剩下的就是計(jì)算總價(jià)與小計(jì)的問(wèn)題了，其實(shí)咋們仔細(xì)想想的話，壓根就不難，難的是這些值它們?nèi)趆tml頁(yè)面上，我們?cè)撛趺窗阉麄兡孟聛?lái)，為我們所用哪？！！！！

?

2.進(jìn)行計(jì)算函數(shù)

//計(jì)算總價(jià)與小計(jì)function productCount(){var $tr=$("#shopping").find("tr[id]");//總價(jià)與積分的初始值var summer=0;var integral=0;$tr.each(function(i,dom){//我們開(kāi)始把頁(yè)面上的值全部拿下來(lái)var num=$(dom).children(".cart_td_6").find("input").val();//商品數(shù)量var price=num*$(dom).children(".cart_td_5").text();//商品小計(jì) $(dom).children(".cart_td_7").html(price);//顯示商品小計(jì)summer+=price;//總價(jià) 已經(jīng)開(kāi)始在累加integral+=$(dom).children(".cart_td_4").text()*num;//積分 });$("#total").text(summer); //總價(jià)$("#integral").text(integral); //積分 }productCount();//頁(yè)面加載完后運(yùn)行

?

3.點(diǎn)擊減號(hào)或加號(hào)得行為

//商品增加減少，flag為true時(shí)增加，flag為false時(shí)減少function changeNumber(dom,flag){var $input = $(dom).parent().find("input");var value = $input.val();if(flag){value++; }else{value--;if(value<=0){ //最起碼件數(shù)不能低于0件，value=1; //當(dāng)我們已經(jīng)規(guī)定了不能低于0件的時(shí)候，我們到底還是把件數(shù)減了，所以我們還是的把件數(shù)調(diào)整回來(lái)alert("寶貝數(shù)量必須大于0"); }}$input.val(value);productCount();};

?

因?yàn)榧犹?hào)和減號(hào)是圖片，所以我們得把函數(shù)綁定到圖片上

4.把點(diǎn)擊加減函數(shù)綁定到圖片上

//點(diǎn)擊減少 當(dāng)我們點(diǎn)擊圖片的時(shí)候，順便調(diào)用一下方法$(".cart_td_6").find("img[alt='minus']").click(function(){changeNumber(this,false);});//點(diǎn)擊增加$(".cart_td_6").find("img[alt='add']").click(function(){changeNumber(this,true);});

?

當(dāng)然我們還有刪除某一列商品，所以我使用了節(jié)點(diǎn)操作

5.節(jié)點(diǎn)操作

//點(diǎn)擊刪除 節(jié)點(diǎn)操作$(".cart_td_8").find("a").click(function(){$(this).parent().parent().prev().remove();//刪除前一tr$(this).parent().parent().remove();//刪除當(dāng)前tr productCount();});

?

還有刪除所選，所以我們自己還得自定義一個(gè)函數(shù)

6.刪除所選

//點(diǎn)擊刪除所選$("#deleteAll").click(function(){$("#shopping").find("tr[id]").each(function(i,e){var $tr=$(e);//返回的值是true或falsevar checked=$tr.children(".cart_td_1").children().is(":checked");if(checked){//prev遍歷的方式用于搜索自己本身同輩元素的上一個(gè) $tr.prev().remove();$tr.remove();}});//點(diǎn)擊刪除所選，依然調(diào)用計(jì)算總價(jià)的函數(shù) productCount();});

所以經(jīng)過(guò)我們層層的解析，其實(shí)壓根也不難，對(duì)吧！！！

我們這個(gè)虛假的購(gòu)物車(chē)，才算完成！！！

那我們下次再見(jiàn)把！

?

轉(zhuǎn)載于:https://www.cnblogs.com/bdqnquliang/p/6495868.html

總結(jié)

以上是生活随笔為你收集整理的初学jQuery之jQuery虚假购物车-------与真实数据无关的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。