Я создал шаблонную часть в PHP, которая копирует кнопку на каждый слайд в карусели, используя fullpage.js.
К сожалению, повторное использование вашего кода приводит к ошибке. Если мы посмотрим на ваш источник, мы увидим:
div.jump-button
button.course-button
div.subnav-content
<script>
const clickOnMe = ...
</script>
Это повторяется ~ 20 раз.
Проблема в том, что const может быть объявлен только один раз. После этого JS выдаст ошибку. На самом деле, если мы посмотрим на консоль, мы увидим только это:
Как правило, после первого объявления const clickOnMe возникает ошибка. Вот почему работает только первый. Я бы посмотрел на перемещение (и консолидацию) <script>, где вы определяете clickOnMe вниз, и вызывал бы это, как только весь HTML загружен.
Edit:
Что касается вашего комментария, я понимаю, что вы имеете в виду. Теперь вы правильно запрашиваете все элементы, перемещая привязку события внизу (потрясающе!), Но ваш слушатель события также должен быть обновлен. На изменение на самом деле отвечают здесь (by @ jeyko-caicedo) путем ссылки на объект event при переключении classList.
Более полным ответом будет то, что вам нужно сослаться на объект события (для ссылки на элемент, по которому щелкнули), а затем запросить брата subnav-content. Одним из способов является то, что предложил Jeyko (закрытие forEach). Другой - в обработчике событий: 1: переход по дереву DOM (с использованием e.currentTarget.parentNode) или 2: просто ссылка на элемент напрямую, например e.currentTarget.nextElementSibling.
let clickOnMe = document.querySelectorAll(".course-button");
Array.from(clickOnMe).forEach(function(el) { // updated `e` to `el`
el.addEventListener("click", (e) => {
let showBox = e.currentTarget.nextElementSibling;
showBox.classList.toggle("open-nav");
});
});