javascript - jQuery 悬停函数

Question

我正在尝试在两个不同的表中同步悬停...但是出于某种原因，当只有函数的第一部分起作用时，添加第二部分会破坏第一部分并且不会给我任何错误。

我没有把它放到 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/