javascript - 任何想法如何优化我的小 Jquery 代码的菜单？

Question

我有 3 个隐藏的 div(#carta1、#carta2 和#carta3)(显示:无)，每个都有不同的信息。当用户越过导航栏时，会显示相应的 div。
它工作正常，但我认为它的代码太多了。有什么方法可以让它更简单(例如只使用 1 个功能)？

感谢您的帮助!

这是我的 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>

Answer 1

thataustin 的答案很有效，另一种选择是将目标定位到您的 ul child ，然后从事件中获取 id。 像这样的东西:

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

然后您可以制作数据标签或进一步定位子项以执行您想要的操作，具体取决于位置 #carta1 , #carta2 , 和 #carta3位于。

同样，Austin 的答案更易于实现和阅读，仅供思考。