JS последний объект массива getElementByClassName

126

11 августа 2019, 09:00

Есть HTML

<div class="why">
    <div class="why__slide why__slide-active"></div>
    <div class="why__slide"></div>
    <div class="why__slide"></div>
    <div class="why__slide"></div>
</div>
<button class="why__button-left" id="why-left-button">назад</button>
<button class="why__button-right" id="why-right-button">вперед</button>

Есть код JS

let slides = document.getElementsByClassName('why__slide');
let slideActive = document.querySelector('.why__slide-active');
let index = 0;
whyPageRightButton.addEventListener('click', moveRight);
function moveRight(p){
    if (slides[index] != slides[index].length) {
        slides[index].classList.remove('why__slide-active');
        slides[++index].classList.add('why__slide-active');
    }
    else {
        slides[0].classList.add('why__slide-active');
    }
}
whyPageLeftButton.addEventListener('click', moveLeft);
function moveLeft(){
    slides[index].classList.remove('why__slide-active');
    slides[index-1].classList.add('why__slide-active');
}

сейчас когда мы щелкаем по правой кнопке мы переключаем класс why__page-active на следующий div. Но когда доходим до последнего, мы должны снова переключиться на первый div в списке, я не понимаю что я делаю не так, прошу помочь с объяснением на примере этого кода на чистом JS

и также когда мы нажимаем на кнопку назад, мы переключаемся только на один div назад, видимо это происходит потому что index = 0. Пожалуйста разжуйте что я делаю не так, сутки в интернете пока не понимаю

Answer 1

function moveRight(p) { 
  slides[index].classList.remove('why__slide-active'); 
  index = Math.min(index + 1, slides.length - 1); 
  slides[index].classList.add('why__slide-active'); 
} 
 
function moveLeft() { 
  slides[index].classList.remove('why__slide-active'); 
  index = Math.max(0, index - 1); 
  slides[index].classList.add('why__slide-active'); 
}

Answer 2

Поведение функций moveRight и moveLeft должно быть аналогичным:

На примере moveRight

убрать класс active с элемента по текущему индексу
увеличить индекс на 1
если индекс == slides.length сбросить индекс в 0
установить класс active элементу по текущему индексу

В коде это может выглядеть так:

function moveRight(){
    slides[index].classList.remove('why__slide-active');
    index = index + 1;
    if (index == slides.length) {
        index = 0;
    }
    slides[index].classList.add('why__slide-active');
}

moveLeft выглядит аналогично.

var whyPageRightButton = document.getElementById('why-right-button'); 
var whyPageLeftButton = document.getElementById('why-left-button'); 
let slides = document.getElementsByClassName('why__slide'); 
let index = 0; 
 
whyPageRightButton.addEventListener('click', moveRight); 
 
function moveRight() { 
  slides[index].classList.remove('why__slide-active'); 
  index = index + 1; 
  if (index == slides.length) { 
    index = 0; 
  } 
  slides[index].classList.add('why__slide-active'); 
} 
 
whyPageLeftButton.addEventListener('click', moveLeft); 
 
function moveLeft() { 
  slides[index].classList.remove('why__slide-active'); 
  index = index - 1; 
  if (index == -1) { 
    index = slides.length - 1; 
  } 
  slides[index].classList.add('why__slide-active'); 
}

.why__slide { 
  border: 1px solid black; 
  width: 40px; 
  height: 40px; 
  display: inline-block; 
} 
 
.why__slide-active { 
  background: red; 
}

<div class="why"> 
  <div class="why__slide why__slide-active"></div> 
  <div class="why__slide"></div> 
  <div class="why__slide"></div> 
  <div class="why__slide"></div> 
</div> 
<button class="why__button-left" id="why-left-button">назад</button> 
<button class="why__button-right" id="why-right-button">вперед</button>

Также можно вообще не использовать индекс, а оперировать только активным элементом.

Сохранить document.getElementsByClassName('why__slide-active') в список. Так как коллекция живая, в ней всегда будет текущий активный элемент.
В обработчиках событий нужно взять этот элемент, он всегда будет нулевым в коллекции, так как всего один активный элемент.
удалить класс active
В случае right - нужно проверить у элемента nextElementSibling
если он отсутствует, значит дошли до конца, и нужно взять первый элемент, сделать это можно вызвав firstElementChild
добавить класс active

В случае left проверяются previousElementSibling и lastElementChild соответственно.

Пример:

var whyPageRightButton = document.getElementById('why-right-button'); 
var whyPageLeftButton = document.getElementById('why-left-button'); 
let activeSlides = document.getElementsByClassName('why__slide-active'); 
 
whyPageRightButton.addEventListener('click', moveRight); 
 
function moveRight() { 
  var activeSlide = activeSlides[0]; 
  activeSlide.classList.remove('why__slide-active'); 
  var nextActive = activeSlide.nextElementSibling || activeSlide.parentNode.firstElementChild; 
  nextActive.classList.add('why__slide-active'); 
} 
 
whyPageLeftButton.addEventListener('click', moveLeft); 
 
function moveLeft() { 
  var activeSlide = activeSlides[0]; 
  activeSlide.classList.remove('why__slide-active'); 
  var nextActive = activeSlide.previousElementSibling || activeSlide.parentNode.lastElementChild; 
  nextActive.classList.add('why__slide-active'); 
}

.why__slide { 
  border: 1px solid black; 
  width: 40px; 
  height: 40px; 
  display: inline-block; 
} 
 
.why__slide-active { 
  background: red; 
}

<div class="why"> 
  <div class="why__slide why__slide-active"></div> 
  <div class="why__slide"></div> 
  <div class="why__slide"></div> 
  <div class="why__slide"></div> 
</div> 
<button class="why__button-left" id="why-left-button">назад</button> 
<button class="why__button-right" id="why-right-button">вперед</button>