讓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代碼更簡單

回答

相關問題