Задать вопрос

При выборе div блока он должен скрыться?

Всем здрасте я новичок в JS. Есть n-е количество div блоков, их может быть 1, 5 или 25. При клике на какой-то блок, он должен скрыться, сам блок скрывается, но только не тот который надо, допустим нажимаю на блок Я это id="8", а скрывается блок Н с id="1".
Не могу понять как сделать соответствующую проверку или надо использовать forEach, но не является массивом???
Заранее спасибо!

<div class="wrapper">
  <div class="show" id="1">Н</div>
  <div class="show" id="2">А</div>
  <div class="show" id="3">З</div>
  <div class="show" id="4">В</div>
  <div class="show" id="5">А</div>
  <div class="show" id="6">Н</div>
  <div class="show" id="7">И</div>
  <div class="show" id="8">Я</div>
</div>


.wrapper > div {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: white;
  background-color: red;
  margin: 4px;
  text-align: center;
  cursor: pointer;
}

div {
  padding: 20px;
}

.show-hidden {
  visibility: hidden;
}


document.querySelector('.wrapper').addEventListener('click', function(e){
  let id = e.target.id;
  let show = document.querySelector('.show');
  //console.log(id);
  //console.log(show);
show.classList.add('show-hidden');
  });
  • Вопрос задан
  • 82 просмотра
Подписаться 1 Простой Комментировать
Решения вопроса 1
v3shin
@v3shin
Веб-шаман
document.querySelector('.show'); выбирает только первый элемент .show, а вам нужен кликнутый элемент.
document.querySelector(".wrapper").addEventListener("click", function (e) {
    e.target.closest('.show').classList.add("show-hidden");
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
godsplan
@godsplan
document.querySelector(".wrapper").addEventListener("click", function (e) {
  let id = e.target.id;
  let show = document.querySelector(`#${id}`);
  show.classList.add("show-hidden");
});

Или
document.querySelector(".wrapper").addEventListener("click", function (e) {
  e.target.classList.add("show-hidden");
});
Ответ написан
sergiks
@sergiks Куратор тега JavaScript
♬♬
Может, просто удалять кликнутые?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы