Общеклассовое событие не работает
Я создаю сетку divs 16x16 в JavaScript.
Каждый div имеет событие mouse enter (унаследованное на основе общий класс), которое должно изменить его фон чернить на белый.
Вот моя проблема:, в то время как каждый div должен менять цвет при наведении курсора, все divs (при наведении курсора) вызывают изменение цвета одного и того же нижнего правого div, а не сами по себе.
Я считаю, что все события ссылаются на последний div под className "squares" (нижний правый div). Как сделать так, чтобы каждое событие ссылалось на свой собственный div?
КОД
//GRID CREATION (30x30)
var container = document.getElementById('container');
var size = 30;
//Row Creation (30)
for(j=0; j < size; j++) {
var row = document.createElement('div');
row.classList.add("row");
//Square Creation (30 per Row)
for(i=0; i<size; i++) {
var square = document.createElement('div')
square.classList.add("square");
//div background-color changes on mouse-enter
square.addEventListener('mouseenter', () => {
this.square.style.background = 'white';
});
row.appendChild(square);
}
container.append(row);
}
Вам нужно создать замыкание, потому что this применяется к последней итерации цикла. Создайте функцию, передайте this и измените там фон
@SterlingArcher: this одинаков для всех итераций цикла, хотя
@ Ry︁ правильно, но если предположить, что this является ссылкой на класс, даже если this удаляется, не будет ли он привязан за пределами цикла?
@Ry @SterlingArcher Изначально у меня не было this, и существовала та же проблема: все события затрагивали только нижний правый div
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Странно найти this.square в прослушивателе событий, когда ничто другое не относится к this.square. Возможно, вы изначально пробовали square.style.background, который не работал по причине, описанной в Замыкание внутри цикла в JavaScript - простой практический пример, затем пытались исправить это с помощью this.style.background = 'white';, который не работал, потому что это была стрелочная функция, а затем пытались заставить this.square работать…?
В любом случае, используйте функцию без стрелки, чтобы получить this внутри как элемент, к которому был прикреплен прослушиватель событий, вместо того же, что и this снаружи:
square.addEventListener('mouseenter', function () {
this.style.background = 'white';
});или лучше объявите свои переменные с помощью let - который должен быть доступен, поскольку вы использовали стрелочную функцию - и обратитесь к square:
//GRID CREATION (30x30)
let container = document.getElementById('container');
let size = 30;
//Row Creation (30)
for (let j = 0; j < size; j++) {
let row = document.createElement('div');
row.classList.add("row");
//Square Creation (30 per Row)
for (let i = 0; i < size; i++) {
let square = document.createElement('div');
square.classList.add("square");
//div background-color changes on mouse-enter
square.addEventListener('mouseenter', () => {
square.style.background = 'white';
});
row.appendChild(square);
}
container.append(row);
}
Также отсутствовали декларации для j и i. Вы должны включить строгий режим и никогда не использовать var, чтобы избежать подобных проблем.
Что такое
this.square?