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(); 
});