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

已经很多了

Answer 1

您可以重写整个代码，如下所示：

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

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

Answer 2

你为什么不这样做：

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

Jquery代码缩短

2 个答案: