轮播 - 如何循环浏览元素

Carousel - How to loop through elements?

本文关键字：循环 浏览 元素 何循环 轮播      更新时间：2023-09-26

我正在尝试弄清楚如何一次循环一个列表元素并在它们运行时对它们应用一个函数，我已经尝试了几种方法，一些提示会有所帮助！

网页结构

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

你需要使用 $（this）.hasClass 来检查 "active" 类。

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;
}

循环将检查元素是否具有"活动"类并将其替换为"已更改"。反之亦然。

我添加了一个 css 类，以便您可以看到正在切换的活动类。用于检查、添加和删除类的方法未写入，因此它因脚本错误而失败。看看我在下面使用 classList 属性做了什么。但是，从您的帖子标题来看，我不确定您是否想暂停每个帖子，然后继续。在这种情况下，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>

小提琴

修复：小提琴

  $(document).ready(function() {
            $('.slide').each(function(i) {
                if ( !$(this).hasClass("active")) {
                    $(this).addClass("active");
                } else {
                    $(this).removeClass("active");
                }
            });
        });
相关文章：