我的“点击”addEventListener 不能正常工作

Question

我正在使用以下代码将侦听器添加到（我附加到表中的 TBODY），因此当我将鼠标放在 TR 上时，我可以看到很好的高亮效果。 我还有一个“点击”事件，它使整行“可点击”，因此用户可以轻松点击整行并转到该特定页面。

我正在使用 JS，因为我使用 AJAX 调用来填充 TR（以及它们的少数 TD）。

我列表中的前 12 个元素用 PHP 很好地完成了，但之后我通过 Ajax 调用加载了下一个 10、10、10...

当我使用 PHP 并将 javascript: 添加到带有“onClick”的 TR 时，它可以完美运行， 但在下面的这段代码（javascript）中，只有 mouseover 和 mouseout 可以正常工作， “click”事件侦听器将 i 的最后一个值添加到所有 window.location.href 中，当前值 (13、14、15)...它仅添加到所有 15（所以总是，i 的最后一个值 - my计数器...它不会像计数器那样递增）。

我认为事件侦听器的功能、它的初始化方式有问题，我不知道。

             for(i=0; i<10; i++){

                    myTr.addEventListener("mouseover",function(){
                        this.style.backgroundColor = "#083636"
                        this.style.cursor = "pointer"
                    });

                    myTr.addEventListener("mouseout",function(){
                        this.style.backgroundColor = "transparent"
                    });

                    myTr.addEventListener("click",function(){
                        window.location.href = '/clubbers/' + clubber_url + '/' + i + '#threads'
                    });

             }

*在输入/复制代码时忘记开始我的for括号，现在看起来不错

Answer 1

这是一个范围问题。基本上，您将 i 传递给您的 eventListener，它与循环递增的变量相同。请参阅How do JavaScript closures work? 以获得更好的解释

你可以这样做：

myTr.addEventListener("click",(function(j){
  return function(e) {
    window.location.href = '/clubbers/' + clubber_url + '/' + j + '#threads'
  }
})(i));

Answer 2

您的问题是事件未正确捕获外部 for 循环中的变量 i，因为在评估事件时，循环已经完成，并且变量处于其最后一个值。

查看这篇文章以获得一些解决方案：

Caputured variables in Javascript

Answer 3

function clickTr(i){
    return function(){
        window.location.href = '/clubbers/' + clubber_url + '/' + i + '#threads';
    }
}
for(i=0; i<10; i++){

                myTr.addEventListener("mouseover",function(){
                    this.style.backgroundColor = "#083636"
                    this.style.cursor = "pointer"
                });

                myTr.addEventListener("mouseout",function(){
                    this.style.backgroundColor = "transparent"
                });

                myTr.addEventListener("click",clickTr(i));

         }