0

他のテーブル ヘッダー (2 つの異なるテーブル) のクリック時にテーブル ヘッダーでクリック イベントを発生させる必要がありますが、ループ中にテーブルでトリガーが発生しません。トリガーをハードコードして個々の要素にバインドすると、機能します。

現在、JS は次のようになっています。

var outsideHeaders = $("#header th");
var tableHeaders = $(".dataTable th");

for(var cnt = 0; cnt< outsideHeaders.length; cnt++)
{
    $(outsideHeaders[cnt]).bind('click',function(){
        $(tableHeaders[cnt]).trigger('click');
    });
}

これに対する解決策を提供してください！

更新:
これは私のコードが今どのように見えるかです:

var outsideHeaders = $("#header th");
var tableHeaders = $(".dataTable th");

for(var cnt = 0; cnt< outsideHeaders.length; cnt++)
{
    (function(headerCnt){
        $(outsideHeaders[headerCnt]).bind('click',function(){
            $(tableHeaders[headerCnt]).trigger('click');
    });
  })(cnt);
}
4

3 に答える 3

2

クリック イベント ハンドラー関数内のの値は、JavaScript でのスコープの動作方法により、ループcnt内の最後の値(この場合、コードが実行されたときのもの) と等しくなります。その特定の反復の値を維持するために、クロージャーを使用する必要があります。forheader.length

$(document).ready(function() {
    var outsideHeaders = $("#header th");
    var tableHeaders = $(".dataTable th");

    for(var cnt = 0; cnt < outsideHeaders.length; cnt++)
    {
        (function(headerCount) {
            $(outsideHeaders[headerCount]).bind('click',function(){
                $(tableHeaders[headerCount]).trigger('click');
            });
        })(cnt);
    }
});

コードを$(document).ready()呼び出しでラップしたことに注意してください。これにより、要素を選択しようとしたときに要素が存在することが保証されます。

于 2013-05-13T09:47:51.983 に答える
2 
var $outsideHeaders = $("#header th"),
    $tableHeaders = $(".dataTable th");

$outsideHeaders.on('click', function(){
   var i = $outsideHeaders.index(this);
   $tableHeaders.eq(i).trigger('click');
});
于 2013-05-13T09:48:24.917 に答える
1

繰り返しを行う必要はありません。私はこれがここで正しい方法かもしれないと思います：

outsideHeaders.on("click", function() {
    var cnt = outsideHeaders.index(this);
    tableHeaders.eq(cnt).trigger("click");
});

clickイベントをすべてにバインドし、インデックスに基づいて対応する要素のイベントをoutsideHeadersトリガーするだけです。clicktableHeaders

于 2013-05-13T09:47:34.757 に答える