jQuery懸停功能

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/