jQuery hover function

Question

I'm trying to sync hovering in two diferente tables... but for some reason when only the first part of the function works, adding the second part breaks the first part and gives me no errors.

I did not put it into the jsfiddle because its not a visual thing... its pure code that's breaking somewhere.

$(function(){
    //first part
        var trsCont = $('#conteudo table tr');
        for (i = 0; i < trsCont.length; i++) {
            trsCont.eq(i).hover(
                function () {
                    $('#coluna_fixa table tr').eq(i-1).toggleClass("hovered");
                    }
                );
            }
        //second part   
        var trsCol = $('#coluna_fixa table tr');
        for (i = 0; i < trsCol.length; i++) {
            trsCol.eq(i).hover(
                function () {
                    $('#conteudo table tr').eq(i+1).toggleClass("hovered");
                }
            );
        }
});

I know I am doing something wrong... can someone just point it out?

Thanks for reading this far.

... especially loops involving global iterator variables :-) — Pointy
– Pointy, Commented Feb 15, 2013 at 18:28

Pat Burke · Accepted Answer · 2013-02-15 18:44:40Z

3

You really shouldnt define event handlers inside of loops. Instead you should make your hover functions more generic, like so:

//first part
       $('#table1 tr').hover(
           function () {
               var index = $(this).index();
               $("#table2 tr:eq(" + (index - 1) + ")").toggleClass("hovered");
           }
       );
        //second part   
        $('#table2 tr').hover(
           function () {
               var index = $(this).index();
               $("#table1 tr:eq(" + (index + 1) + ")").toggleClass("hovered");
           }
       );

Check out this JSFiddle for an example: http://jsfiddle.net/cAEWR/2/

edited Feb 15, 2013 at 18:44

answered Feb 15, 2013 at 18:29

Pat Burke

5905 silver badges13 bronze badges

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

5 Comments

BBacon Over a year ago

The problem is the logic needed. I need to trigger the hover event on the Table 2 Tr(X-1) when Table 1 Tx(X) is hovered.

Pat Burke Over a year ago

@MBarni Ah, I did not notice that from the original code. Let me modify to JS Fiddle

BBacon Over a year ago

Vice-versa must happen too.

Pat Burke Over a year ago

@MBarni Updated. Should work for you now. JSFiddle is updated as well

BBacon Over a year ago

Thank you very much! Very fast, constructive, wise coding and teaching.

Collectives™ on Stack Overflow

jQuery hover function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related