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

Question

[Ivan Ivanovich]

Есть код: 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 при нажатии не понимаю.

Answer 1

[0xD34F]

.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);
}

Comments

[Ivan Ivanovich]

0xD34F Спасибо!