今天在作項目掃尾工做,抽空把購物車界面計價及計數代碼分享一下,主要就是幾個函數的定義及其引用,只要搞清邏輯關係,仍是很好理解的。代碼以下:css
var q=0;
$('.choice_all').click(function(){
if(q==0){
$('.choice_s').css('display','block');
q=1;
}else if(q==1){
$('.choice_s').css('display','none');
q=0;
}
if($('.choice_s').css('display')=='none'){
$('.choice_one').css('display','none');
}
if($('.choice_s').css('display')=='block'){
$('.choice_one').css('display','block');
}
getprice();
});//全選按鈕點擊取消與否實現全選及全不選
$('.choice_but').click(function(){
if($(this).find('.choice_one').css('display')=='block'){
$(this).find('.choice_one').css('display','none');
}else{
$(this).find('.choice_one').css('display','block');
}
/*console.log($('.choice_one').eq(1).css('display'));
for(var x in $('.choice_one') ){
console.log(x);
if($('.choice_one').eq(x).css('display')=='none'){
$('.choice_s').css('display','none');
}
}*/
var n=0;
for(var i=0;i<=$('.shopping_cart>ul>li').length-1;i++){
if($('.choice_one').eq(i).css('display')=='none'){
$('.choice_s').css('display','none');
}
if($('.choice_one').eq(i).css('display')=='block'){
n++;
}
if(n==$('.shopping_cart>ul>li').length){
$('.choice_s').css('display','block');
}
}
getprice();
});//點擊單選實現單個選中及全選的取消選中;函數
function reduce1(t){;
var num=$(t).parent().find('input').val();
num--;
if(num<1){
num=1;
}
$(t).parent().find('input').val(num);
var price=$(t).parent().find('.money_one>span').text();
var allprice =price*num;
$(t).parent().find('.money_two>span').text(allprice);
getprice();
}
function increase1(t){;
var num=$(t).parent().find('input').val();
num++;
$(t).parent().find('input').val(num);
var price=$(t).parent().find('.money_one>span').text();
var allprice =price*num;
$(t).parent().find('.money_two>span').text(allprice);
getprice();
}
function getprice(){
var item=$('.money_two>span');
var allprice1=0;
//累加商品價格
for(var i=0;i<item.length;i++){
var m=0;
if($('.choice_one').eq(i).css('display')=='block'){
m=1;
}
var prict=parseFloat($(item[i]).text());
allprice1+=prict*m;
}
$('.money_all>span').text(allprice1);
}this