旋转木马 - 如何循环遍历元素？

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

- NathanKTC

---

你正在正确的道路上，你会想出来的。（最好删除这个） - Jonathan

是的，你很可能会收到很多重复问题标记。有很多选择。你说其他选项“对我来说没有可执行性，需要重写很多代码”。那么你在这里期望得到什么样的答案呢？我们提供的任何代码都可能需要你重新编写一些代码。也许你可以重新提问问题，使其更具“可回答性”。 - Phil Tune

@Jonathan 谢谢，有没有可能得到更明确的提示？ - NathanKTC

@philtune 在这个阶段，我正在尝试弄清楚如何逐个循环遍历每个列表元素，并在运行时对它们应用一个函数，我会在问题中反映出来。 - NathanKTC

Answer 1

你需要使用 $(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;
}

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

- display name

Answer 2

修复：

fiddle

。

  $(document).ready(function() {

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

- Michelangelo

Answer 3

我已经添加了一个 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>

This text is written in Chinese and can be translated to English as follows:

Fiddle

The translated text in English still contains the original HTML code and does not provide any further explanation.

- Mic