在循環中單擊其他元素時觸發單擊事件

Question

我有一個要求，我必須在其他表頭（2個不同的表）上單擊時在表頭上觸發click事件，但是在循環中時不會在表上觸發觸發器。 盡管如果我對觸發器進行硬編碼並將其綁定到單個元素，它仍然可以工作。

當前，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);
}

Answer 1

由於JavaScript的作用域工作方式，click事件處理函數中的cnt值將等於其在for循環中的最后一個值（在這種情況下，無論執行代碼時的header.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()調用中。 當您嘗試選擇元素時，這將確保這些元素存在。

Answer 2

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

$outsideHeaders.on('click', function(){
   var i = $outsideHeaders.index(this);
   $tableHeaders.eq(i).trigger('click');
});

Answer 3

無需進行迭代。 我想這可能是正確的方法：

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

您只需將click事件綁定到所有outsideHeaders並根據索引觸發tableHeaders對應元素的click事件。