2
\$\begingroup\$

I've created a JQuery script to help illustrate a few points for my teaching class, but I have having trouble slimming it down.

$(document).ready(function() {
    var red = $(".small-box");
    var blue = $(".small-box2");
    var green = $(".large-box");
    red.hover(
        function () {
            red.addClass("selected-highlight");
            blue.addClass("selected-highlight2");
            green.addClass("selected-highlight3");
        },
        function () {
        red.removeClass("selected-highlight");
            blue.removeClass("selected-highlight2");
            green.removeClass("selected-highlight3");
       }
    );
    blue.hover(
        function () {
            red.addClass("selected-highlight3");
            blue.addClass("selected-highlight");
            green.addClass("selected-highlight2");
        },
        function () {
            red.removeClass("selected-highlight3");
            blue.removeClass("selected-highlight");
            green.removeClass("selected-highlight2");
       }
    );
    green.hover(
        function () {
            red.addClass("selected-highlight2");
            blue.addClass("selected-highlight3");
            green.addClass("selected-highlight");
        },
        function () {
            red.removeClass("selected-highlight2");
            blue.removeClass("selected-highlight3");
            green.removeClass("selected-highlight");
       }
    );
});

Everything works as it should, but I know there is a way to slim down the "removeClass" part to one single line. I am having trouble remembering how to do so. The idea is to whatever box you hover over is red and the colors follow accordingly in the order of: red, blue, and green.

.container-left {
    float:left;
}
.small-box {
    width:300px;
    height:300px;
    background-color:#FFF;
    border-top:1px #000 solid;
    border-left:1px #000 solid;
}
.small-box2 {
    width:300px;
    height:300px;
    background-color:#FFF;
    border-left:1px #000 solid;
    border-bottom:1px #000 solid;
    border-top:1px #000 solid;;
}
.container-right {
    float:left;
}
.large-box {
    width:300px;
    height:601px;
    background-color:#FFF;
    border:1px #000 solid;
}
.selected-highlight{
    background-color:red;
}
.selected-highlight2 {
    background-color:blue;
}
.selected-highlight3 {
    background-color:#00FF00;
}
\$\endgroup\$
3
\$\begingroup\$

A little shorter:

$(document).ready(function() {
    var red = $(".small-box");
    var blue = $(".small-box2");
    var green = $(".large-box");
    var boxes = red.add(blue).add(green);

    boxes.mouseleave(function() {
        boxes.removeClass("selected-highlight selected-highlight2 selected-highlight3");
    });

    red.mouseenter(
        function () {
            red.addClass("selected-highlight");
            blue.addClass("selected-highlight2");
            green.addClass("selected-highlight3");
        }
    );
    blue.mouseenter(
        function () {
            red.addClass("selected-highlight3");
            blue.addClass("selected-highlight");
            green.addClass("selected-highlight2");
        }
    );
    green.mouseenter(
        function () {
            red.addClass("selected-highlight2");
            blue.addClass("selected-highlight3");
            green.addClass("selected-highlight");
        }
    );
});
\$\endgroup\$
3
\$\begingroup\$

Building on BumleB2na. The repeated calls to addClass seemed to cloud the intent of the code with the uninteresting details.

$(document).ready(function() {
    var red = $(".small-box");
    var blue = $(".small-box2");
    var green = $(".large-box");
    var boxes = red.add(blue).add(green);

    function highlight() { // optional params used, generalizable with a loop
        arguments[0].addClass("selected-highlight");
        arguments[1].addClass("selected-highlight2");
        arguments[2].addClass("selected-highlight3");
    }

    boxes.mouseleave(function() {
        boxes.removeClass("selected-highlight selected-highlight2 selected-highlight3");
    });

    red.mouseenter(
        function () {
            highlight(red, blue, green);
        }
    );
    blue.mouseenter(
        function () {
            highlight(blue, green, red);
        }
    );
    green.mouseenter(
        function () {
            highlight(green, red, blue);
        }
    );
});
\$\endgroup\$
  • \$\begingroup\$ This is awesome. I had no idea you could pass unexpected params to a function like this, but I think it could get confusing if you do it often. When I want a function to have optional params, I specify them in the function definition and then check if optional params are != undefined. But still, very interesting that this can be done.. \$\endgroup\$ – BumbleB2na Jul 26 '11 at 14:22
  • \$\begingroup\$ Glad that I've though you a new trick. I prefer explicit parameters as well. In this case the implicit optional parameters are just for show and because the name of the parameters did not just pop into my head :) \$\endgroup\$ – Aleksi Yrttiaho Jul 26 '11 at 19:51

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.