2
\$\begingroup\$

I have 5 or 6 ID's and I need to compress .hover jQuery into smaller amounts. I tried this answer, but due to how he needed only 1 "group" inside the .hover function, it makes mine not work because I need a way to have 2 "groups" inside the function.

$(document).ready(function(){
    $("#menuicon").click(function(){
        $("#menuicon").addClass("gn-selected");
        $("#menuwrapper").addClass("gn-open-all");
    });

    $("#menuicon").hover(function(){
        $("#menuicon").addClass("gn-selected");
        $("#menuwrapper").addClass("gn-open-all");
        }, function(){
        $("#menuicon").removeClass("gn-selected");
        $("#menuwrapper").removeClass("gn-open-all");
    });

    $("#menuwrapper").hover(function(){
        $("#menuicon").addClass("gn-selected");
        $("#menuwrapper").addClass("gn-open-all");
        }, function(){
        $("#menuicon").removeClass("gn-selected");
        $("#menuwrapper").removeClass("gn-open-all");
    });

    $(".gn-scrollbar").hover(function(){
        $("#menuicon").addClass("gn-selected");
        $("#menuwrapper").addClass("gn-open-all");
        }, function(){
        $("#menuicon").removeClass("gn-selected");
        $("#menuwrapper").removeClass("gn-open-all");
    });

    $(".gn-menu").hover(function(){
        $("#menuicon").addClass("gn-selected");
        $("#menuwrapper").addClass("gn-open-all");
        }, function(){
        $("#menuicon").removeClass("gn-selected");
        $("#menuwrapper").removeClass("gn-open-all");
    });
});

The gn-selected and gn-open-all is just part of my CSS it uses transformX to update the height and width in a responsive way.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ What effect do the gn-selected and gn-open-all classes have, visually or functionally? In other words, why are you doing this? (Feel free to clarify by editing the answer, possibly by including a live demonstration using Ctrl-M.) \$\endgroup\$ Sep 9, 2015 at 4:03

1 Answer 1

1
\$\begingroup\$

jQuery's $ function, like CSS, also accepts comma-separated selectors for multiple matches. Plus, if #menuicon and #menuwrapper don't change, then you can store their jQuery-wrapped versions into a variable for reuse. Avoids all that wrapping every hover.

Even further, if you find yourself writing those class names all over the place, you could also store it in a "constant". The advantage of this is that you only have to modify the string value in one place rather than in multiple places. Since JS doesn't have constants in most browsers (yet), you can use the all caps and underscores convention.

You can shorten all of those into something like this.

var GN_SELECTED = 'gn-selected';
var GN_OPEN_ALL = 'gn-open-all';
var menuIcon = $("#menuicon");
var menuWrapper = $("#menuwrapper");

menuIcon.click(function(){
  menuIcon.addClass(GN_SELECTED);
  menuWrapper.addClass(GN_OPEN_ALL);
});

$("#menuicon, #menuwrapper, .gn-menu, .gn-scrollbar").hover(function(){
  menuIcon.addClass(GN_SELECTED);
  menuWrapper.addClass(GN_OPEN_ALL);
}, function(){
  menuIcon.removeClass(GN_SELECTED);
  menuWrapper.removeClass(GN_OPEN_ALL);
});
\$\endgroup\$
4
  • \$\begingroup\$ Sorry for the late reply. I posted this question at 2am and had school at 8am I blacked out xD. Ill checkout this right now! \$\endgroup\$
    – John123
    Sep 9, 2015 at 12:58
  • \$\begingroup\$ Amazing, Works perfect! \$\endgroup\$
    – John123
    Sep 9, 2015 at 13:02
  • \$\begingroup\$ One last thing, Why wont something like var show = '"display", "block"'; & div.css(show); work? \$\endgroup\$
    – John123
    Sep 9, 2015 at 13:13
  • \$\begingroup\$ @John123 That's a question for StackOverflow. \$\endgroup\$
    – Joseph
    Sep 9, 2015 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.