带有匿名函数的事件侦听器（typeError ，toggle undefined）

用户7171623

我是Javascript新手。

我有两张相同的桌子并排放置。我想要镜面效果。case 1在没有匿名函数的情况下工作正常。

但是，我的case 2Javascript 代码中似乎存在一些问题，这对我的项目至关重要

情况1

 var table1td = document.querySelectorAll("#table1 td");
 var table2td = document.querySelectorAll("#table2 td");

 for(var i=0; i<table2td.length; i++)
 {
    table2td[i].addEventListener("click",_click);
 }

 function _click() {
    this.classList.toggle("_changecolor");
 }

案例二

 var table1td = document.querySelectorAll("#table1 td");
 var table2td = document.querySelectorAll("#table2 td");    

 for(var i=0; i<table2td.length; i++)
 {
    table2td[i].addEventListener("click", function(){_click(i)});
 }

function _click(index) {
    this.classList.toggle("_changecolor");
    table2td[9-index].classList.toggle("_changecolor");
}

（HTML、CSS 代码没有变化）

易卜拉欣·马里尔

您的代码有两个问题：

你不能使用thisinside_click因为它不会成为你的元素。触发事件的元素将绑定到传递给的匿名函数addEventListener，而不是_click（取决于您的代码的其余部分，将绑定到undefined或全局对象window）。

您可以通过在匿名函数中使用orthis调用时显式设置值来解决此问题：_clickFunction#callFunction#apply

for(var i = 0; i < table2td.length; i++) {
    table2td[i].addEventListener("click", function() {
        _click.call(this);                       // passing the current this (of the anonymous function) to _click as we invoke it
    });
}

function _click() {
    this.classList.toggle("_changecolor");       // using this is OK
}

由于这个著名的问题，您无法使用索引。

一个快速解决方法是使用let（尊重块范围）而不是var（不尊重）：

for(let i = 0; i < table2td.length; i++) {       // using let instead of var
    table2td[i].addEventListener("click", function() { _click(i); });
}

function _click(index) {                         // using index is also OK
    table2td[index].classList.toggle("_changecolor");
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。