javascript - 为什么我不能让每个 tr 标签的事件起作用？

Question

我试图让一个大表的每个 tr 在点击时在它的一个 td 中切换一个 div，这就是我所做的：

for( i = 2 ; i < trLen; i++ ){
   var id = $("td.idout", "tr:eq(" + i + ")").text();
   $("tr:has(div#" + id + ")").click(function(){
       $("div #"+ id).toggle();
   });
}

我让每个 div 的 id 都与条目相同（在var id上面提到的选择中输出）。我已经测试了每个选择，它们都很完美。我的逻辑一定有问题，因为它不起作用。它根本没有做任何事情。

Answer 1

div在和符号之间有一个多余的空格#，而不是选择带有特定的 div，而是选择 div内id的元素id：

尝试改变：

$("div #"+ id).toggle();

和：

$("div#"+ id).toggle(); // or $("#"+ id).toggle()

Answer 2

var关键字声明函数范围的变量，而不是您可能期望的块范围的变量。因此，您只有 1id由循环的每次迭代共享for。而且，由于该click函数将在循环完成后调用，因此id该选择器将始终具有循环中的最后一个值：

...function(){
    $("div#"+ id).toggle();
}...

您可以使用立即调用的函数来解决此问题，该函数将包含每次迭代的变量：

for( i = 2 ; i < trLen; i++ ) {
    (function () {
        var id = $("td.idout", "tr:eq(" + i + ")").text();
        ...
    })();
}

或者，最终，您将能够使用let关键字：

for( i = 2 ; i < trLen; i++ ) {
    let id = $("td.idout", "tr:eq(" + i + ")").text();
    ...
}