jQuery hover function

Question

Я пытаюсь синхронизировать зависание в двух таблицах diferente ... но по какой-то причине, когда работает только первая часть функции, добавление второй части ломает первую часть и не дает мне никаких ошибок.

Я не помещал его в jsfiddle, потому что это не визуальная вещь ... ее чистый код, который где-то ломается.

$(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"); 
       } 
      ); 
     } 
}); 

Я знаю, что я делаю что-то неправильно ... может кто-то просто указать на это?

Спасибо, что прочитали это.

Answer 1

Вы действительно не должны определять обработчики событий внутри циклов. Вместо этого вы должны сделать ваши функции при наведении курсора более общий характер, например, так:

//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"); 
      } 
     ); 

Проверить эту JSFiddle для примера: http://jsfiddle.net/cAEWR/2/