让jQuery代码更简单

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

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

来源

2015-07-19 DCdaz

你有你的HTML吗？ – mwilson

我其实并没有看到太多错误。这是很多代码，但对我来说似乎很简洁。 – ydobonebi

@QuinnRoundy是的，它真的只是把它放下来MTO产生了一个好主意。 – DCdaz

你可以使它更干通过消除重复的代码：

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

来源

2015-07-20 00:03:59 MT0

实际上，他应该为他的元素添加一个公共类，并且只在这个类中添加侦听器。然后，他可以用'data-name'属性或其他东西来检测它的元素种类。 – Johnride

正是我想要感谢的那种东西。 – DCdaz

@Johnride这不可能发生不幸的事情。 – DCdaz

这是我会做的。

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

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

来源

2015-07-20 00:08:04 DominicValenciana

尽管它不是一个ID。它是一个与ID不同的类 – DCdaz

让jQuery代码更简单

回答

相关问题