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
    \$\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\$ – 200_success Sep 9 '15 at 4:03
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\$
  • \$\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 '15 at 12:58
  • \$\begingroup\$ Amazing, Works perfect! \$\endgroup\$ – John123 Sep 9 '15 at 13:02
  • \$\begingroup\$ One last thing, Why wont something like var show = '"display", "block"'; & div.css(show); work? \$\endgroup\$ – John123 Sep 9 '15 at 13:13
  • \$\begingroup\$ @John123 That's a question for StackOverflow. \$\endgroup\$ – Joseph Sep 9 '15 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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