2015-05-21 190 views
0
$('.btnSmall.mobileBtn.about').on('click', function(e){ 
    $('.about').css({'display': 'block'}); 
    $('.compareMobile').css({'display': 'none'}); 
    $('.mobileFeaturedStatments').css({'display':'none'}); 
    $('.mobileBtn').removeClass('activeBtn'); 
    $(this).addClass('activeBtn'); 
    }); 

    $('.btnSmall.mobileBtn.vS').on('click', function(e){ 
    $('.about').css('display', 'none'); 
    $('.compareMobile').css('display' , 'block'); 
    $('.mobileFeaturedStatments').css('display' , 'none'); 
    $('.mobileBtn').css({'background' : '#A6A8AB'}); 
    $(this).addClass('activeBtn'); 

    }); 

    $('.btnSmall.mobileBtn.trending').on('click', function(e){ 
    $('.about').css({'display': 'none'}); 
    $('.compareMobile').css({'display': 'none'}); 
    $('.mobileFeaturedStatments').css({'display':'block'}); 
    $('.mobileBtn').css({'background' : '#A6A8AB'}); 
    $(this).addClass('activeBtn'); 
    }); 

按预期工作,但我认为有一些方法可以删除这些重复。也许更优雅的解决方案。我怎样才能让这更干?

+1

后一些HTML代码 –

回答

1

事情是这样的:

$('.btnSmall.mobileBtn.vS,.btnSmall.mobileBtn.about,.btnSmall.mobileBtn.trending).on('click', function(e){ 
    var isvs=$(this).is('.vS'); 
    var isabout=$(this).is('.about'); 
    var istrending=$(this).is('.trending'); 
    $('.about').css({'display':isabout ? 'block':'none'}); 
    $('.compareMobile').css({'display':isvs ? 'block':'none'}); 
    $('.mobileFeaturedStatments').css('display' , istrending ? 'block':'none'); 
    $('.mobileBtn').css({'background' : '#A6A8AB'}); 
    $(this).addClass('activeBtn'); 
}); 
+0

真棒。不知道你可以在css中使用三元组。 – NoobSter

+0

@stanleytd:很高兴帮助:) –