jquery代碼縮短

Question

我寫了一個小的jquery代碼，但它看起來非常多餘和幼稚。任何人都可以幫助縮短它或使效率更高？

下面的代碼：

// DIM The Light Effect 
    var dimlight = $(".dimlight"), 
    showlight = $(".showlight"), 
    overlay = $("#overlay") 
    playerlive = $("#player_live"), 
    lightswitch = $(".light_switch") 

     playerlive.mouseover(function(){ 

     lightswitch.show(); 
     }); 

     playerlive.mouseout(function(){ 

     lightswitch.hide(); 
     }); 

     dimlight.click(function(){ 

     overlay.fadeIn(); 
     dimlight.hide(); 
     showlight.show(); 
     }); 

     showlight.click(function(){ 
     overlay.fadeOut(); 
     dimlight.show(); 
     showlight.hide(); 
     }); 

     showlight.click(function(){ 
     overlay.fadeOut(); 
     dimlight.show(); 
     showlight.hide(); 
     }); 

THX很多已

Answer 1

爲什麼你不只是做：

$('.dimlight, .showlight').click(function(){ 
    if ($(this).hasClass('dimlight')) { 
     overlay.fadeIn(); 
     dimlight.hide(); 
     showlight.show(); 
    } else { 
     overlay.fadeOut(); 
     dimlight.show(); 
     showlight.hide(); 
    } 
    }); 

Answer 2

你可以重寫如下整個代碼：

$("#player_live").hover(function(){ 
    $(".light_switch").toggle(); 
}); 

var elems = $('.dimlight, .showlight'); 
elems.click(function(){ 
    elems.toggle(); 
    $("#overlay").fadeToggle(); 
});