使jQuery代码更简单

Question

我想知道是否有人对如何使我的代码更加简化有任何想法，所以它不是那么重。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

这是我要做的。

＆＃xA;＆＃xA;

  $（“。sn-fresh”）。mouseenter（yourfunction（e）;＆＃xA; function yourfunction（）{＆＃xA; $（ '.um-cat'）。hide（）;＆＃xA; clearTimeout（t）;＆＃xA; $（'＃ultra-menu'，＃'+ e.target.id）.fadeIn（600）;＆ #xA;}＆＃xA;  

＆＃xA;＆＃xA;

使用此方法，它将使用目标父级名称动态淡入。

＆＃xA ;