Question

我有3个div（＃carta1，＃carta2和＃carta3）隐藏（显示：无），每个div都有不同的信息。当用户越过导航栏时，会显示相应的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

每当你重复这样的代码时，它通常都表明你可以把它放到一个函数中。

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，则可以删除fadeoutTime参数。我不知道500这是不是一个错字。

Answer 2

Thataustin的答案很有效，另一个选择是定位到你的孩子，然后从事件中获取id。类似的东西：

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

然后，您可以根据#carta1，#carta2和#carta3的位置，进一步制作数据代码或定位儿童以执行所需的操作。

再一次，奥斯汀的回答更容易实现，更容易阅读，只是值得深思。

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

2 个答案: