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

我添加了 css class 以便您可以看到正在切换的活动 class。您检查、添加和删除 class 的方法未写入，因此因脚本错误而失败。看看我在下面使用 class 列表属性所做的事情。但是，从您的 post 标题来看，我不确定您是否想在每个标题上暂停然后继续。在这种情况下，javascript setInterval 方法可能是您需要的工具。 http://www.w3schools.com/jsref/met_win_setinterval.asp

$(document).ready(function() {
            $(".custom-item").find('.slide').each(function(){
                if (!this.classList.contains("active")) {
                    this.classList.add("active");
                } else {
                    this.classList.remove("active");
                }
            });
        });

.active{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <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>

Fiddle

Answer 2

您需要使用 $(this).hasClass 来检查 "active" class。

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' class 并将其替换为 'changed'。反之亦然。

Answer 3

修复：fiddle

  $(document).ready(function() {

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

Carousel - 如何遍历元素？

Carousel - How to loop through elements?

html

javascript

jquery