Как определить какой блок нужно переключать?

Question

[zekin375]

Есть три одинаковых элемента, с кнопками переключение добавляется класс _active, не могли бы помочь как сделать что бы при переключение класс менялся только у нужного блока

Answer 1

[Ваня]

Примерно так можно исправить код. Собрать все parents, пройтись по ним forEach и передавать в on(parent)

document.addEventListener( "DOMContentLoaded" , function() {
  const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
         if(target = target.closest(selector)) fn(target)
     });
  const parents = document.querySelectorAll(".section-gallery-wrapper.flexbox");
  parents.forEach( parent => {
     //const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
     //    if(target = target.closest(selector)) fn(target)
     //});
     //const parent = document.querySelector(".section-gallery-wrapper.flexbox");
     const children  = parent.children;
     let index = [...parent.children].indexOf(parent.querySelector("._active"));
     const show = ({dataset : {up}}) => {
       children[index].classList.remove("_active");
       index = (Number(up) + index + children.length) % children.length;
       children[index].classList.add("_active");
     };
     //on(document, "click", "[data-up]", show);
    on(parent, "click", "[data-up]", show);
  });
 });

Comments

[zekin375]

Спасибо

[zekin375]

Извините, а не подскажите как я могу пропустить итерацию, по сколько кнопки находятся в элементе к ним присваивается так же класс, как можно пропускать кнопки и переходить к первом элементу ?

[Ваня]

zekin375, ничего не понял

[zekin375]

Сергей,

У меня получается .section-gallery-wrapper.flexbox 5 элементов

4 - span
1 - div

Как сделать что если мы доходим до div пропускать и возвращаться к первому span.

То есть если по примеру цвет красный, не должен пропадать один элемент должен быть всегда _active, но я дохожу до блока с кнопками и ему тоже присваиваю класс, из за этого цвет пропадает

[Ваня]

zekin375,
Убрать последний элемент div из span. Но это все костыли

index = (Number(up) + index + children.length - 1) % (children.length - 1);

[zekin375]

Сергей, Спасибо, большое