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来检查＆＃34; active＆＃34;类。

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

循环将检查元素是否已激活＆＃39;上课并将其替换为＆＃39;已更改＆＃39;。反之亦然。

Answer 2

我已经添加了一个css类，以便您可以看到正在切换的活动类。您检查，添加和删除类的方法都没有写入，所以它因脚本错误而失败。请参阅下面我使用classList属性完成的操作。但是，根据您的帖子标题判断，我不确定您是否想要暂停每个帖子，然后继续。在这种情况下，javascript setInterval方法可能是您想要的工具。 http://www.w3schools.com/jsref/met_win_setinterval.asp

＆＃13;

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

＆＃13;

.active{
  background-color:red;
}

＆＃13;

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

＆＃13;

Fiddle

Answer 3

修复：fiddle

  $(document).ready(function() {

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

轮播 - 如何循环元素？

3 个答案: