Как показывать нужный блок в зависимости от клика?

Question

[intriga93]

https://jsfiddle.net/9d2encsk/3/

Answer 1

[0xD34F]

Кого кликаем, кого показываем, какой класс отвечает за показ, через какой атрибут задаётся связь кнопок и блоков:

const buttonOpenSelector = '.project__zoom';
const buttonCloseSelector = '.overlay--close';
const contentSelector = '.overlay--gallery';
const key = 'gallery';
const attr = `data-${key}`;
const activeClass = 'overlay--active';

Вот jquery:

$(document)
  .on('click', buttonOpenSelector, function() {
    $(`${contentSelector}[${attr}="${$(this).data(key)}"]`).addClass(activeClass);
  })
  .on('click', buttonCloseSelector, function(){
    $(this).closest(contentSelector).removeClass(activeClass);
  });

А вот jquery нет:

document.addEventListener('click', ({ target: t }) => {
  t
    .closest(buttonCloseSelector)
    ?.closest(contentSelector)
    .classList
    .remove(activeClass);

  (t = t.closest(buttonOpenSelector)) && document
    .querySelector(`${contentSelector}[${attr}="${t.dataset[key]}"]`)
    .classList
    .add(activeClass);
});

Answer 2

[Павел Корнилов]