6.6日 16:11更新購物車
我胡漢三又回來了匾二，有幾天沒更新了吧哮独，慚愧！
昨天到今天終于把購物車啃出來了察藐，不容易啊〗杷裕現(xiàn)在想想也不是挺難嘛，為何還看了那么久转培。是不是有點馬后炮恶导，哈哈。怎么說呢浸须，購物車需要寫的jquery挺多的惨寿，一開始看到那么多久頭疼。
因為里面有的功能是重復(fù)的删窒，所以把重復(fù)的內(nèi)容拿出來放到函數(shù)里裂垦，需要用到時在調(diào)用他。全選肌索，圖片前面的小框其實是圖片蕉拢，選中的時候就換成選中的圖片。我一開始還以為這是一個復(fù)選框呢。不過晕换，這樣也更容易實現(xiàn)午乓，挺佩服站長的。
選中圖片時闸准，小框圖片換成選中的圖片益愈，當(dāng)前行改變背景色，下面的結(jié)算按鈕背景也換成紅色夷家，還要判斷是不是所有行的圖片都選中了蒸其，如果選中了就把全選換成選中。所以库快，在這個事件里摸袁，要調(diào)用的三個函數(shù)，分別實現(xiàn)這些义屏。
<script>
$("img.cartProductItemIfSelected").click(function(){
var selectit = $(this).attr("selectit");
if("selectit" == selectit){
$(this).parents("tr.trInfo").css("background-color" , "white");
$(this).attr("src" , "http://how2j.cn/tmall/img/site/cartNotSelected.png");
$(this).attr("selectit" , "false");
}
else{
$(this).parents("tr.trInfo").css("background-color" , "#FFF8E1");
$(this).attr("src" , "http://how2j.cn/tmall/img/site/cartSelected.png");
$(this).attr("selectit" , "selectit");
}
checkAll();
accountNumber();
accountBotton();
});
</script>
當(dāng)鼠標(biāo)點擊小方框時但惶，取出當(dāng)前元素的selectit,這個元素屬性是自定義的，初始化為false湿蛔，
當(dāng)selectit為false時代表未選中膀曾，為selectit時代表選中。然后就判斷selectit是否為selectit如果相等阳啥，就把背景色改成和原來一樣添谊，圖片改成未選中，并且把selectit改為false.如果是false,把背景色改成黃色察迟，圖片改成選中斩狱。改變背景色，這里用的是$(this).parents("tr.trInfo").css();代表的是當(dāng)前元素的tr.trInfo這個父元素扎瓶，如果parents("tr.trInfo")括號為空所踊，則默認為他的所有父元素。
現(xiàn)在就是調(diào)用其他函數(shù)了概荷，先調(diào)用checkAll()這個函數(shù)秕岛，代表全選是否打開，代碼如下误证。
function checkAll(){
var selectAll = true;
$("img.cartProductItemIfSelected").each(function(){
if ("false" == $(this).attr("selectit"))
selectAll = false;
});
if (selectAll){
$("img.selectAllItem").attr("src" , "http://how2j.cn/tmall/img/site/cartSelected.png");
}
else{
$("img.selectAllItem").attr("src" , "http://how2j.cn/tmall/img/site/cartNotSelected.png" );
}
}
先遍歷每行小方框继薛，把每個小方框的selectit屬性都拿來和false比較，判斷是否有沒有被選中的愈捅，只要有一個未被選中遏考，就把變量selectAll設(shè)為假，然后就判斷變量蓝谨。如果為真 灌具，就把全選改為選中青团，為假則相反。
接下來就是** accountNumber();**這個函數(shù)了咖楣，這個函數(shù)是把結(jié)算那里的價格改成選中的價格督笆。代碼如下
function accountNumber(){
var sum = 0;
var totalNum = 0;
$("img.cartProductItemIfSelected[selectit = 'selectit']").each(function(){
var oiid = $(this).attr("oiid");
var price = $("span.priceMoney[oiid = "+oiid+"]").text();
price = price.replace(/,/g , "");
price = price.replace(/￥/g , "");
sum += new Number(price);
var ShuRu = $("input.inputSee[oiid = "+oiid+"]").val();
totalNum += new Number(ShuRu);
});
$("span.JiaGe1").html("￥" + formatMoney(sum));
$("span.JiaGe2").html("￥" + formatMoney(sum));
$("JianShu").html(totalNum);
}
** $("img.cartProductItemIfSelected[selectit = 'selectit']").each(function()這句代碼，代表遍歷選中的小方框截歉，oiid也是自定義的屬性胖腾，然后獲取當(dāng)前元素屬性oiid的值烟零，在金額那里也設(shè)了這個屬相瘪松，并且和當(dāng)前行相等，每一行的oiid**值都不一樣锨阿，這樣才好找每一行的金額宵睦。
** var price = $("span.priceMoney[oiid = "+oiid+"]").text();** 這樣就是找和當(dāng)前元素oiid值一樣的金額，并把金額里的文本內(nèi)容取出來墅诡。因為金額里面有￥和,這兩個符號壳嚎，所以就用replace這個函數(shù)去掉，然后把取出來的金額相加末早，還有下面有一個件數(shù)烟馅，再把件數(shù)取出來相加。最后改變結(jié)算按鈕前面文本內(nèi)容為相加后的金額然磷，件數(shù)郑趁。
最后調(diào)用** accountBotton();**函數(shù)，這個函數(shù)是改變按鈕背景色以及解除禁用姿搜。代碼如下寡润。
function accountBotton(){
var buttonAll = false;
$("img.cartProductItemIfSelected").each(function(){
if ("selectit" == $(this).attr("selectit")){
buttonAll = true;
}
});
if (buttonAll){
$("button.button1").css("background-color" , "#C40000");
$("button.button1").removeAttr("disabled");
}
else{
$("button.button1").css("background-color" , "#AAAAAA");
$("button.button1").attr("disabled" , "disabled");
}
}
});
改變背景色，遍歷小方框舅柜。如果小方框有一個選中了梭纹，就改變按鈕的背景色，并解除禁用致份。disabled屬性是禁用按鈕变抽，也就無法鼠標(biāo)點擊按鈕，沒選中就相反氮块。
下面就是鍵盤按下輸入框事件發(fā)生的 事了瞬沦，代碼如下。
$("input.inputSee").keyup(function(){
var pid = $(this).attr("pid");
var XianZhi = $("span.XianZhi[pid = "+pid+"]").text();
var price = $("span.spanShu[pid = "+pid+"]").text();
var num = $("input.inputSee[pid = "+pid+"]").val();
num = parseInt(num);
if (isNaN(num))
num = 1;
if (num > XianZhi)
num = XianZhi;
if (num <= 0)
num = 1;
synPrice(pid , price , num);
});
pid也是自定義的屬性雇锡，和oiid差不多主要是找到一行的數(shù)據(jù)紐帶逛钻。XianZhi
這個標(biāo)簽是庫存， 也就是最大值锰提。和spanShu這兩個標(biāo)簽是隱藏的曙痘，設(shè)這兩個標(biāo)簽主要是取值方便芳悲。取出輸入框的值，不能是字符不能超過庫存和小于0边坤，然首把取到的值放到下面的函數(shù)名扛，代碼如下。
function synPrice(pid, price , num){
$("input.inputSee[pid = "+pid+"]").val(num);
var totalNum = formatMoney(price * num);
$("span.priceMoney[pid = "+pid+"]").html("￥" + totalNum);
accountNumber();
}
把輸入框和pid值相等的寫入修改好的值茧痒，再把金額那里的內(nèi)容修改成增加后的值肮韧。
$("a.aTop").click(function(){
var pid = $(this).attr("pid");
var XianZhi = $("span.XianZhi[pid = "+pid+"]").text();
var price = $("span.spanShu[pid = "+pid+"]").text();
var num = $("input.inputSee[pid ="+pid+"]").val();
num--;
if (num <= 0)
num = 1;
synPrice(pid , price , num);
});
$("a.aDown").click(function(){
var pid = $(this).attr("pid");
var XianZhi = $("span.XianZhi[pid = "+pid+"]").text();
var price = $("span.spanShu[pid = "+pid+"]").text();
var num = $("input.inputSee[pid ="+pid+"]").val();
num++;
if (num > XianZhi)
num = XianZhi;
synPrice(pid , price , num);
});
上面兩個事件，分別是點擊+和-后發(fā)生的事旺订，比較簡單弄企。下面的是把金額修改成千為表示法，也就是在千位后加分號区拳。
function formatMoney(num){
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + num + '.' + cents);
}
