初學(xué)者用jquery來寫仿真的購物車，確實有點惡心，那我們今天就把這萬惡的購物車剖析一下，來看看到底有什么難的.

?

購物車的效果圖

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

帶有序號的，都是一些分析！

?

1.全選或全不選效果

//點擊復(fù)選框全選或全不選效果$("#allCheckBox").click(function(){var checked=$(this).is(":checked"); //檢查這個集合里有沒有匹配的元素 返回true，false$(".cart_td_1").children().attr("checked",checked); //把上面的變量放在這邊來用 });//判斷是否全選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)前對象的索引，或者是所有的對象的索引 dom當(dāng)前對象，或者是對象if($(dom).is(":checked")) k++; //匹配頁面上處于選中狀態(tài)的元素 });if(k==sum){ //當(dāng)我們拿出了input復(fù)選框的個數(shù)$("#allCheckBox").attr("checked",true); //如果為true的話，就改變值}else{$("#allCheckBox").attr("checked",false); //否則的話，我們也改變值 }}ifAllChecked();//頁面加載完后運行//單選判斷$(".cart_td_1").children().click(function(){ifAllChecked(); });

當(dāng)我們解決了復(fù)選框的問題后，剩下的就是計算總價與小計的問題了，其實咋們仔細(xì)想想的話，壓根就不難，難的是這些值它們?nèi)趆tml頁面上，我們該怎么把他們拿下來，為我們所用哪？！！！！

?

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

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

?

3.點擊減號或加號得行為

//商品增加減少，flag為true時增加，flag為false時減少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ù)調(diào)整回來alert("寶貝數(shù)量必須大于0"); }}$input.val(value);productCount();};

?

因為加號和減號是圖片，所以我們得把函數(shù)綁定到圖片上

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

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

?

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

5.節(jié)點操作

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

?

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

6.刪除所選

//點擊刪除所選$("#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遍歷的方式用于搜索自己本身同輩元素的上一個 $tr.prev().remove();$tr.remove();}});//點擊刪除所選，依然調(diào)用計算總價的函數(shù) productCount();});

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

我們這個虛假的購物車，才算完成！！！

那我們下次再見把！

?

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

總結(jié)

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

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