structuring functions. Can't add if statement within the existing code

Question

I'm not very experience doing functions longer than a couple of lines, and I'm struggling with this one already as it displays errors on the code if I try to do it:

This is the 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');
    });

What I'm trying to achieve is that if hover #mainNavigation li, it adds the class activeNav to that

, and IF there is a subMainNavigation class, then I want to display #displaySubmenu. But I am trying to do the if there, and doesn't matter where I put it, it's wrong.

Also, I've though I can achieve the same I'm doing with hover to mouse over, but If I add the code to mouseover instead it's just doesn't work!! But the main issue I have..... it's to put the if statement if it finds a subMainNavigation class...

Here is a fiddle, it looks a bit crab... but it looks alright in my browser....http://jsfiddle.net/5egzkgfm/

I would do:

$("#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');
});

But then it doesn't display anything at all...

Thank you :)

score 1 · Accepted Answer · answered Nov 06 '15 at 13:41

Your if statement doesn't work because the find function you called in it doesn't exist. Find is a jQuery object function; you have to call it on a jQuery object, such as $(this). Errors like these will appear in the console. Accessing the console in Chrome and 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

A working if statement:

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

Your code for adding the activeNav code doesn't work properly. You're toggling the activeNav class whenever the user starts hovering over a menu item but not removing the class when the user stops hovering over a menu item.

Mouseover behaves slightly differently to hover, see here: when to choose mouseover() and hover() function

structuring functions. Can't add if statement within the existing code

1 Answers1