javascript - 使 jQuery 代码更简单

Question

我想知道是否有人对如何使我的代码更精简以使其不那么沉重有任何想法。

 var t;
 $(".sn-fresh").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-fresh").fadeIn(600);
 });

 $(".sn-salt").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-salt").fadeIn(600);
 });

 $(".sn-shoot").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-shoot").fadeIn(600);
 });

 $(".sn-eques").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-eques").fadeIn(600);
 });

 $(".sn-cloth").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-cloth").fadeIn(600);
 });

 $(".sn-brand").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-brand").fadeIn(600);
 });

 $("#ultra-menu").mouseleave(function() {
   clearTimeout(t);
   t = setTimeout(function() {
     $("#ultra-menu, .um-cat").fadeOut(600);
   }, 300);
 });
 $("#main-navigation a").mouseleave(function() {
   clearTimeout(t);
   t = setTimeout(function() {
     $("#ultra-menu, .um-cat").fadeOut(600);
   }, 300);
 });
 $("#ultra-menu").mouseenter(function() {
   clearTimeout(t);
   $("#ultra-menu").fadeIn(600);
 });

Answer 1

您可以通过消除重复的代码使其更干:

var names = ["fresh","salt","shoot","eques","cloth","brand"];

names.forEach( function( name ){
  $(".sn-"+name).mouseenter(function() {
    $(".um-cat").hide();
    clearTimeout(t);
    $("#ultra-menu, #um-" + name ).fadeIn(600);
  });
});

或者:

$("#ultra-menu, #main-navigation a").mouseleave(function() {
  clearTimeout(t);
  t = setTimeout(function() {
    $("#ultra-menu, .um-cat").fadeOut(600);
  }, 300);
});

或:

var menus = [ "#ultra-menu", "#main-navigation a" ];

menus.forEach( function( menu ){
  $(menu).mouseleave(function() {
    clearTimeout(t);
    t = setTimeout(function() {
      $("#ultra-menu, .um-cat").fadeOut(600);
    }, 300);
  });
});