IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности

Как сделать отображение текста при клике?

Есть код: https://jsfiddle.net/2dqnm6L8/

<div class="card">
  <button>Click</button>
  <div class="text">Ok1</div>
</div>
<div class="card">
  <button>Click</button>
  <div class="text">Ok2</div>
</div>
<div class="card">
  <button>Click</button>
  <div class="text">Ok3</div>
</div>

*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.card{
  width: 100px;
  height: 100px;
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.text{
  display: none;
}

const allBtn = document.querySelectorAll('.card button'),
      allText = document.querySelectorAll('.text');

const openMenu = ()=>{
  openMenuList.style.opacity = '1';
}
  
allBtn.forEach(function(item, i, allBtn){
  item.addEventListener('click', openMenu);
  });


Как сделать по нажатию на кнопку отображение текста в элементе .text?

Т.е. например нажимаем на кнопку по середине, к ней текст Ok2.

Я через foreach задал кнопкам обработчики события клика, но вот как реализовать отображение текста в элементе .text при нажатии не понимаю.
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
.card.show .text {
  display: block;
}

const containerSelector = '.card';
const buttonSelector = 'button';
const activeClass = 'show';

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  const container = button && button.closest(containerSelector);
  container && container.classList.toggle(activeClass);
});

// или

document
  .querySelectorAll(`${containerSelector} ${buttonSelector}`)
  .forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.closest(containerSelector).classList.toggle(activeClass);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 11:11
10000 руб./за проект
29 мар. 2024, в 10:00
10000 руб./за проект
29 мар. 2024, в 09:59
750 руб./в час