@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');
});
  • Вопрос задан
  • 56 просмотров
Решения вопроса 3
delphinpro
@delphinpro
frontend developer
Допустим, у вас каждый блок расположен в элементе с классом .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');
  });

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

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

Альтернатива — слушать клики выше в дереве, в общем родителе. Проверять, что кликнули именно button.btn-more, дальше исходя из этой кнопки находить в DOM-дереве ближайшие элементы, которым надо менять классы. Делегирование событий.
Ответ написан
Комментировать
black1277
@black1277
Вольный стрелок
Так document.querySelector и выбирает первый элемент, удовлетворяющий поиску. Чтобы добавить действие всем элементам с классом btn-more нужно использовать document.querySelectorAll, который возвращает массивоподобную коллекцию, по которой можно пробежать мапом и навесить действие. Но, основная сложность будет в том, чтобы каждой кнопке сопоставить свои элементы, которые нужно скрывать\показывать. Нужно либо добавить им дополнительные атрибуты с одинаковым значением для каждой группы либо по структуре DOM дерева выбирать нужные.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы