0

2 つの異なるテーブルでホバリングを同期しようとしていますが、なんらかの理由で関数の最初の部分のみが機能する場合、2 番目の部分を追加すると最初の部分が壊れ、エラーは発生しません。

視覚的なものではないため、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");
                }
            );
        }
});

私は何か間違ったことをしていることを知っています...誰かがそれを指摘できますか?

ここまで読んでくれてありがとう。

4

1 に答える 1

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/

于 2013-02-15T18:29:43.660 に答える