Прослушиватель событий с анонимной функцией (typeError, toggle undefined) - PullRequest
Новая
       13

Прослушиватель событий с анонимной функцией (typeError, toggle undefined)

0 голосов
/ 28 апреля 2018

Я новичок в Javascript .

У меня есть два одинаковых стола, положенных рядом. Я хотел бы иметь зеркальный эффект. case 1 отлично работает без анонимной функции.

Однако в моем case 2 коде Javascript, похоже, есть некоторая проблема, которая жизненно важна для моего проекта


ДЕЛО 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");
 }

СЛУЧАЙ 2 

 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)

1 Ответ

0 голосов
/ 28 апреля 2018

Есть две проблемы с вашим кодом:

  1. Вы не можете использовать this внутри _click, потому что это не будет вашим элементом. Элемент, вызвавший событие, будет привязан к анонимной функции, переданной addEventListener, а не _click (которая, в зависимости от остальной части вашего кода, будет либо привязана к undefined, либо к глобальному объекту window ).

Это можно исправить, явно установив значение this при вызове _click из анонимной функции, используя Function#call или Function#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
}
  1. Вы не можете использовать индексы из-за этой известной проблемы .

Быстрое исправление будет состоять в использовании 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");
}
...