Как выбрать все кнопки с одним классом и сделать открытие/закрытие контента?

Question

[zanzoS]

Проблема в том, что все работает только на первую кнопку в коде, на остальных - нечего не происходит. У меня в каждом из табов есть своя кнопка открытия контента кейса портфолио(<button class="btn-more">подробнее</button>), как сделать чтобы открытие контента происходила на всех кнопках.

const caseBtn = document.querySelector('.btn-more');
const caseCloseBtn = document.querySelector('.close__content');
const bodyPortfolio = document.querySelector('body');
const caseContent = document.querySelector('.portfolio__content');

caseBtn.addEventListener('click', (event) => {
  event.stopPropagation();
  caseContent.classList.add('case__active');
  bodyPortfolio.classList.add('overflowhidden');
});

caseCloseBtn.addEventListener('click', (event) => {
  event.stopPropagation();
  caseContent.classList.remove('case__active');
  bodyPortfolio.classList.remove('overflowhidden');
});

Answer 1

[Сергей delphinpro]

Допустим, у вас каждый блок расположен в элементе с классом .portfolio

<div class="portfolio"><button class="btn-more">подробнее</button>...</div>
<div class="portfolio"><button class="btn-more">подробнее</button>...</div>
<div class="portfolio"><button class="btn-more">подробнее</button>...</div>

// Это не нужно. К body можно обратиться напрямую document.body
//const bodyPortfolio = document.querySelector('body');

[...document.querySelectorAll('.portfolio')].forEach(function(item){

  const caseBtn = item.querySelector('.btn-more');
  const caseCloseBtn = item.querySelector('.close__content');
  const caseContent = item.querySelector('.portfolio__content');

  caseBtn.addEventListener('click', (event) => {
    event.stopPropagation();
    caseContent.classList.add('case__active');
    document.body.classList.add('overflowhidden');
  });

  caseCloseBtn.addEventListener('click', (event) => {
    event.stopPropagation();
    caseContent.classList.remove('case__active');
    document.body.classList.remove('overflowhidden');
  });

});

Answer 2

[Сергей Соколов]

только на первую кнопку

...

querySelector

querySelector() находит и отдаёт первый элемент, подходящий селектору. Остальные остаются вне игры.

Зато querySelectorAll() выберет все подходящие. Но потом коллекцию (NodeList) надо обходить циклом. Например,

querySelectorAll(...).forEach(item => что-то-сделать-с-item)

.

Альтернатива — слушать клики выше в дереве, в общем родителе. Проверять, что кликнули именно button.btn-more, дальше исходя из этой кнопки находить в DOM-дереве ближайшие элементы, которым надо менять классы. Делегирование событий.

Answer 3

[black1277]

Так document.querySelector и выбирает первый элемент, удовлетворяющий поиску. Чтобы добавить действие всем элементам с классом btn-more нужно использовать document.querySelectorAll, который возвращает массивоподобную коллекцию, по которой можно пробежать мапом и навесить действие. Но, основная сложность будет в том, чтобы каждой кнопке сопоставить свои элементы, которые нужно скрывать\показывать. Нужно либо добавить им дополнительные атрибуты с одинаковым значением для каждой группы либо по структуре DOM дерева выбирать нужные.

Comments

[Сергей Соколов]

не «мапом»

[black1277]

Сергей Соколов, ну да, сначала надо в массив преобразовать, но это уже детали реализации :)