在循环中单击其他元素时触发单击事件

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事件。