Блог

У меня есть что-то вроде карусели. У меня есть класс, active который делает определенный элемент видимым. Я хотел бы проехать по ним на велосипеде. Есть ли способ проверить, у какого ребенка активный класс, чтобы я мог переместить активный класс в следующий?

пример html:

 <div class="carouselContainer">
    <div class="carouselItemDiv">
        <img src="" loading="eager" data-showtime="5000" class="carouselItem">
    </div>
    <div class="carouselItemDiv">
        <img src="" loading="eager" data-showtime="5000" class="carouselItem active">
    </div>
    <div class="carouselItemDiv">
        <img src="" loading="eager" data-showtime="5000" class="carouselItem">
    </div>
    <div class="carouselItemDiv">
        <img src="" loading="eager" data-showtime="5000" class="carouselItem">
    </div>
</div>
 

Конечно. Есть несколько способов решить эту проблему. Один из способов-захватить все элементы, проверить их по отдельности, а затем пометить следующий как активный.

 // grab all the carousel items
var items = document.querySelector(".carouselContainer")
    .querySelectorAll(".carouselItemDiv");
    
// loop thru each of the carousel items
for( var i = 0; i < items.length; i   ){

  // if the item is active
  if ( items[i].classList.contains("active") ){

    // mark it inactive
    items[i].classList.remove("active");

    // if last item in list, mark the first item active
    if ( i == items.length - 1 ){
      items[0].classList.add("active");
    }
    // otherwise mark the next item active
    else {
      items[i 1].classList.add("active")
    }

    return;
  }
}
 

Вы также можете положиться на dom, но таким образом вы торгуете небольшой структурной гибкостью.

 // grab the active item
var item = document.querySelector(".carouselItemDiv.active");

// mark it inactive
item.classList.remove("active");

// if there's an item after it, mark it active    
if ( item.nextElementSibling ){
  item.nextElementSibling.classList.add("active");
} 
// otherwise mark the first carousel item active
else {
  document.querySelector(".carouselItemDiv").classList.add("active");
}
 

Вы можете проверить, имеет ли div класс «активный», используя этот код:

 var carouselItemDivs = document.getElementsByClassName("carouselItemDiv");

for (var i = 0; i < carouselItemDivs.length; i  ) {
    if (carouselItemDivs[i].classList.contains("active") {
        // carouselItemDivs[i] has the class "active"
        // Do something
    }
}