2

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

我正在使用 JS,因为我使用 AJAX 调用来填充 TR(以及他们的少数 TD)。

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

当我使用 PHP 并将 javascript: 添加到带有“onClick”的 TR 时,它可以完美运行,但是在下面的代码(javascript)中,只有 mouseover 和 mouseout 可以正常工作,“click”事件侦听器会添加到所有 window.location.href i 的最后一个值,当前值 (13, 14, 15) 的 insted ......它只加到所有 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'
                    });

             }

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

4

3 回答 3

1
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));

         }
于 2013-08-03T18:15:30.887 回答
1

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

查看这篇文章以获取一些解决方案:

Javascript 中捕获的变量

于 2013-08-03T18:04:32.533 回答
1

这是一个范围问题。基本上,您将传递i给您的 eventListener,它与循环递增的变量相同。请参阅JavaScript 闭包如何工作?为了更好的解释

你可以这样做:

myTr.addEventListener("click",(function(j){
  return function(e) {
    window.location.href = '/clubbers/' + clubber_url + '/' + j + '#threads'
  }
})(i));
于 2013-08-03T18:05:26.330 回答