jQuery悬停功能

时间:2013-02-15 18:20:35

标签: javascript jquery html css

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

我没有把它放到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");
                }
            );
        }
});

我知道我做错了什么......有人可以指出来吗?

感谢您阅读此内容。

1 个答案:

答案 0 :(得分:3)

你真的不应该在循环中定义事件处理程序。相反,你应该让你的悬停函数更通用,如下所示:

//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/