Question

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

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

我的列表中的前12个元素与PHP完美匹配，但之后我通过Ajax调用加载下一个10,10,10 ....

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

我认为关于事件监听器如何运行，如何初始化以及我不知道的事情是错误的。

             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'
                    });

             }

*忘记在键入/复制代码时启动我的括号，现在它看起来不错

Answer 1

你的问题是事件没有正确捕获外部for循环中的变量i，因为在评估事件时，循环已经完成，变量是它的最后一个值。

查看这篇文章了解一些解决方案：

Caputured variables in Javascript

Answer 2

这是一个范围问题。基本上你将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 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));

         }

我的“click”addEventListener不能正常工作

3 个答案: