javascript - jQuery hover function -

javascript - jQuery hover function -

i'm trying sync hovering in 2 diferente tables... reason when first part of function works, adding sec part breaks first part , gives me no errors.

i did not set jsfiddle because not visual thing... pure code that's breaking somewhere.

$(function(){ //first part var trscont = $('#conteudo table tr'); (i = 0; < 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'); (i = 0; < trscol.length; i++) { trscol.eq(i).hover( function () { $('#conteudo table tr').eq(i+1).toggleclass("hovered"); } ); } });

i know doing wrong... can point out?

thanks reading far.

you shouldnt define event handlers within of loops. instead should create hover functions more generic, 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 jsfiddle example: http://jsfiddle.net/caewr/2/

javascript jquery html css