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 
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 回答
2

由于 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()调用中。这将确保当您尝试选择元素时元素存在。

于 2013-05-13T09:47:51.983 回答
1

无需进行迭代。我想这可能是正确的方法：

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

您只需将click事件绑定到所有并根据索引outsideHeaders触发click相应元素的事件。tableHeaders

于 2013-05-13T09:47:34.757 回答