Javascript 如何优化我的菜单小Jquery代码？

我有3个隐藏的div（#carta1、#carta2和#carta3）（显示：无），每个div都有不同的信息。当用户浏览导航栏时，会显示相应的div。
它工作正常，但我认为代码太多了。。有没有办法使它更简单（例如只使用一个函数）

谢谢你的帮助

以下是我的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);
});

下面是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>

每当您重复这样的代码时，通常表示您可以将其放入函数中

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

---

如果在所有情况下仅希望淡出时间为750，则可以删除淡出时间参数。我不知道那500是不是一个打字错误。

奥斯汀的答案很好，另一个选择是针对你的ul孩子，然后从活动中获取id。 比如：

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

然后，您可以根据

#carta1

、

#carta2

和

#carta3

的位置，进一步制作数据标记或以子对象为目标来执行所需的操作

---

同样，奥斯汀的答案更容易实现，更容易阅读，值得思考。

你应该尽量避免悬停，因为它不存在于触摸屏设备上。

\carta1

、

\carta2

和

\carta3

？不用担心：）多关注一段代码总是有帮助的。