javascript - Carousel - 如何遍历元素？

Question

我试图找出如何一次循环遍历每个列表元素并在它们运行时对其应用一个函数，我尝试了几种方法，一些提示会有所帮助!

HTML结构

<div class="custom-item">
  <ul>
    <li id="first-slide" class="slide active"><h1>Test</h1></li>
    <li id="second-slide" class="slide"><h1>Test</h1></li>
    <li id="third-slide" class="slide"><h1>Test</h1></li>
  </ul>
</div>

我已经制定了一个 each 函数，如果我理解正确，它将处理类的更改，这是我无法遍历每个元素的地方。

$(document).ready(function() {
  $( ".slide" ).each(function( i ) {
    if ( this.className !== "active" ) {
      this.addClass("active");
    } else {
      this.removeClass("active");
    }
  });
});

Answer 1

您需要使用 $(this).hasClass 来检查“事件”类。

JSFiddle

http://jsfiddle.net/39o0bagv/

JavaScript

$(document).ready(function() {
            $( ".slide" ).each(function( i ) {
                if ( $(this).hasClass("active") ) {
                    $(this).removeClass('active');
                    $(this).addClass("changed");
                } else {
                    $(this).addClass("active");
                }
            });
        });

CSS

.active {
    color: red;
}
.changed {
    color: blue;
}

循环将检查元素是否具有“active”类并将其替换为“changed”。反之亦然。