任何想法如何優化我的小JQuery代碼的菜單？

我有3個div（＃carta1，＃carta2和＃carta3）隱藏（display：none），每個都有不同的信息。當用戶通過導航欄時，會顯示相應的div。
它工作正常，但我認爲它的代碼很多..有沒有什麼辦法可以使它更簡單（例如只使用1個函數）？任何想法如何優化我的小JQuery代碼的菜單？

感謝您的幫助！

here's我jQuery代碼：

$("#frueh, #carta1").hover(function (e) { 
     e.preventDefault(); 
     $("#carta1").stop().fadeIn(); 
    }, 
     function(){ 
     $("#carta1").stop().fadeOut(750); 
}); 



$("#sup, #carta2").hover(function (e) { 
     e.preventDefault(); 
     $("#carta2").stop().fadeIn(); 
    }, 
     function(){ 
     $("#carta2").stop().fadeOut(500); 
}); 


$("#sal, #carta3").hover(function (e) { 
     e.preventDefault(); 
     $("#carta3").stop().fadeIn(); 
    }, 
     function(){ 
     $("#carta3").stop().fadeOut(750); 
});

和here's的HTML列表：

<ul id="speise"> 
       <li><a id="frueh" href="">Frühstück</a></li> 
       <li><a id="sup" href="">Suppen</a></li> 
       <li><a id="sal" href="">Salate</a></li> 
</ul>

來源

2014-12-02 Maximiliano Ruiz-Tagle

您應該儘量避免懸停，因爲它不存在於觸摸屏設備上。 – 2014-12-02 22:12:34

'＃carta1'，'＃carta2'和'＃carta3'在哪裏？ – Turnip 2014-12-02 22:14:46

每當你重複這樣的代碼，它通常是一個跡象，表明你可以把它變成一個功能。

function registerHoverListener(triggerElementId, displayElementId, fadeoutTime) { 
    var fadeIn = function(e) { 
     e.preventDefault(); 
     $(displayElementId).stop().fadeIn(); 
    }; 

    var fadeOut = function() { 
     $(displayElementId).stop().fadeOut(fadeoutTime); 
    }; 

    $(triggerElementId, displayElementId).hover(fadeIn, fadeOut); 
}); 

registerHoverListener("#sup, #carta2", 500); 
registerHoverListener("#sal, #carta3", 750); 
registerHoverListener("#frueh, #carta1", 750);

您可以刪除fadeoutTime PARAM如果你只希望它是750在所有情況下。我不知道500是否是一個錯字。

來源

2014-12-02 22:21:51 thataustin

謝謝！這有助於很多！ :) – 2014-12-02 22:24:26

不用擔心:)它總是有助於更多的眼睛在一段代碼。 – thataustin 2014-12-02 22:31:46

thataustin的答案效果很好，另一種選擇是針對你的ul孩子，然後從活動中獲取id。喜歡的東西：

$("#speise > li > a").hover(function (e) { 
    e.preventDefault(); 
    alert(e.target.id); 
});

然後，你可以使數據標籤或目標兒童進一步執行所需的操作，不同的地方#carta1，#carta2和#carta3所在。

同樣，奧斯汀的答案更容易實現，更容易閱讀，只是一種思考。

來源

2014-12-02 22:55:54 pohlman

任何想法如何優化我的小JQuery代碼的菜單？

回答

相關問題