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

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); } }); ）由于JavaScript中的作用方式有效。您需要使用闭包以便为特定迭代维护其值：

$(document).ready()

请注意，我已将代码包装在{{1}}调用中。这将确保在您尝试选择元素时存在元素。

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，并根据索引触发click的相应元素的tableHeaders事件。

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

3 个答案: