Зачем в данном случае удалять класс?

145

17 января 2021, 13:20

Непонятен фрагмент кода в строке 1. Надо реализовать подсветку ячейки при клике.

Вместо того, чтобы назначать обработчик для каждой ячейки, которых может быть очень много – мы повесим единый обработчик на элемент .

Он будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его. Т.е я если не пойму почему если selectedTd) удалить класс highlight из свойства classList?

table.onclick = function(event) { 
	let target = event.target.closest('td') 
  if (target) 
  	highlight(target) 
} 
 
var selectedTd; 
function highlight(node) { 
  if (selectedTd) { 
    selectedTd.classList.remove('highlight'); // 1* 
  } 
  selectedTd = node; 
  selectedTd.classList.add('highlight'); 
}

Answer 1

table.onclick = function(event) {
  let target = event.target.closest('td');
  if (target){
    highlight(target); // Не хочется неприятных сюрпризов - хорошо бы всегда ставить ; и {}
  }
}
var selectedTd; // undefined
function highlight(node) {
  if (selectedTd) {// пока undefined = вернет false и не выполнится.
    selectedTd.classList.remove('highlight'); // 1*
  }
  selectedTd = node;
  // Определили его = кликнутый (еще не подкрашенный) элемент; Он же let target = ...
  selectedTd.classList.add('highlight'); // Покрасили;
}

На следующем клике selectedTd уже будет определен == предыдущий кликнутый и покрашенный элемент. Условие вернет true, краска уберется, потом уже переменная переопределится в новый кликнутый элемент и так по кругу.