使jQuery代码更简单
使jQuery代码更简单
提问于 2015-07-19 23:55:43
我想知道是否有人想过如何使我的代码更加精简，这样就不会太重了。
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);
});
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-20 00:03:59
通过消除重复的代码，可以使其更加干燥：
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);
});
});Stack Overflow用户
发布于 2015-07-20 00:08:04
我会这么做的。
$(".sn-fresh").mouseenter(yourfunction(e);
function yourfunction(){
$('.um-cat').hide();
clearTimeout(t);
$('#ultra-menu', #'+e.target.id).fadeIn(600);
}使用此方法，它将动态地使用目标父级的名称进行淡入。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31507197
复制相关文章
相似问题
腾讯云开发者
