通过div的子元素循环一个类

Question

我有一个旋转木马。我有一个叫做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>

Answer 1

没问题。有几种方法可以解决这个问题。一种方法是抓取所有项目，逐个检查，然后将下一个标记为活动。

// 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");
}

Answer 2

可以检查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
}
}