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

Answer 2

這就是我要做的。

$(".sn-fresh").mouseenter(yourfunction(e);
function yourfunction(){
$('.um-cat').hide();
clearTimeout(t);
$('#ultra-menu', #'+e.target.id).fadeIn(600); 
}

使用此方法，它將使用目標父級名稱動態地淡入。