Merge multiple jQuery scripts into more efficient code

Question

Is there a way to merge those scripts or make code more efficient? I'm new to jquery and I think I produce too much code. Is it possible to optimize it?

<script>
    jQuery(".myClass1").hover(
        function () {
            jQuery(".myClass1 h3").addClass("addedClass1");
        },
        function () {
            jQuery(".myClass1 h3").removeClass("addedClass1");
       }
    );
</script>


<script>
    jQuery(".myClass1").hover(
        function () {
            jQuery(".myClass1 h3").addClass("addedClass2");
        },
        function () {
            jQuery(".myClass1 h3").removeClass("addedClass2");
       }
    );
</script>

is it possible to optimize those also:

<script>
    jQuery(".myClass1").hover(
        function () {
            jQuery(".myClass1 h3").addClass("addedClass");
        },
        function () {
            jQuery(".myClass1 h3").removeClass("addedClass");
       }
    );
</script>


<script>
    jQuery(".myClass2").hover(
        function () {
            jQuery(".myClass2 h3").addClass("addedClass");
        },
        function () {
            jQuery(".myClass2 h3").removeClass("addedClass");
       }
    );
</script>

Boaz · Accepted Answer · 2015-05-20 03:48:24Z

3

Try combining your selectors, taking advantage of the this object, and passing a single handler function employing the toggleClass method like so:

jQuery(".myClass1, .myClass2").hover(
    function () {
        jQuery(this).find("h3").toggleClass("addedClass");
   }
);

First, by combining your selectors ".myClass1, myClass2" with a comma between them, you can chain a single hover event to all elements of both classes.

Second, by using the handler function's this object, you are able to reference the current element that fired the hover event, without having to know its specific class.

Finally, by passing a single handler function and using the toggleClass method you perform the same action that two handler functions served with two separate calls to addClass and removeClass.

edited May 20, 2015 at 3:48

answered Apr 26, 2015 at 20:01

Boaz

20.3k9 gold badges69 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Merge multiple jQuery scripts into more efficient code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related