javascript - 结构化函数。无法在现有代码中添加 if 语句

Question

我对执行超过几行的函数没有太多经验，而且我已经在努力解决这个问题了，因为如果我尝试这样做，它会在代码上显示错误:

这是 jquery:

 $("#mainNavigation li").hover(function() {
        $submenu = $(this).toggleClass("activeNav").find(".subMainNavigation").html();
        $("#displaySubmenu").html($submenu);
    }, function() {
        $submenu = $(this).find(".subMainNavigation");
        $("#displaySubmenu").css("display", "none");
    });

    $('#mainNavigation').mouseover(function(){
        $('#displaySubmenu').show();
        $('#mainContent').addClass('curtainBackground');
    });

    $('.wrapperWh').mouseleave(function(){
         $('#mainContent').removeClass('curtainBackground');
    });

我想要实现的是，如果将鼠标悬停在 #mainNavigation li 上，它会将 activeNav 类添加到该

中，如果有一个 subMainNavigation 类，那么我想显示 #displaySubmenu。但我试图在那里做 if ，无论我把它放在哪里，它都是错误的。

另外，我虽然可以通过将鼠标悬停在鼠标悬停上来实现相同的效果，但是如果我将代码添加到鼠标悬停上，那就行不通了!但我遇到的主要问题...是如果找到 subMainNavigation 类就放置 if 语句...

这是一个 fiddle ，它看起来有点螃蟹...但在我的浏览器中看起来不错... http://jsfiddle.net/5egzkgfm/

我会这样做:

$("#mainNavigation li").hover(function() {
    $submenu = $(this).toggleClass("activeNav");
    if(find(".subMainNavigation").html()) {
    $("#displaySubmenu").html($submenu);
}
}, function() {
    $submenu = $(this).find(".subMainNavigation");
    $("#displaySubmenu").css("display", "none");
});

$('#mainNavigation').mouseover(function(){
    $('#displaySubmenu').show();
    $('#mainContent').addClass('curtainBackground');
});

$('.wrapperWh').mouseleave(function(){
     $('#mainContent').removeClass('curtainBackground');
});

但是它根本不显示任何内容......

谢谢:)

Answer 1

您的 if 语句不起作用，因为您在其中调用的 find 函数不存在。 Find 是一个 jQuery 对象函数；您必须在 jQuery 对象上调用它，例如 $(this)。类似这样的错误将出现在控制台中。在 Chrome 和 Firefox 中访问控制台:

https://developers.google.com/web/tools/chrome-devtools/debug/console/console-ui https://developer.mozilla.org/en-US/docs/Tools/Web_Console?redirectlocale=en-US&redirectslug=Using_the_Web_Console

一个有效的 if 语句:

    var subMenu = $(this).find(".subMainNavigation");
    if(subMenu.length) {
        $("#displaySubmenu").html(subMenu.html());
    }

您添加 activeNav 代码的代码无法正常工作。每当用户开始将鼠标悬停在菜单项上时，您就会切换 activeNav 类，但当用户停止将鼠标悬停在菜单项上时，您不会删除该类。

鼠标悬停的行为与悬停略有不同，请参见此处:when to choose mouseover() and hover() function