Question

我正在尝试使用setInterval来循环更改类，直到最后一项。它正在运作，但我一直无法阻止它骑自行车。我还想让最后一个项目以独特的课程结束。这就是我到目前为止所做的。

<ul id="provision1" class="provisioning-list">
    <li class="in-progress">Configure Active Directory</li>
    <li>Create User Accounts and Groups</li>
    <li>Build Server Configurations</li>
    <li>Create NTFS</li>
    <li>Create Network</li>
    <li>Apply SDN Rules</li>
    <li class="last">Configure Users</li>
</ul>

像这样的东西

var toggleSlide = function(){

$("#provision1 li.in-progress").removeClass('in-progress').addClass('complete')
    .next().add("#provision1 li:first").last().addClass("in-progress");
}

setInterval(toggleSlide, 1000);

Answer 1

试试这个

var toggleSlide = function(){
    var current = $("#provision1 li.in-progress"),
        next = current.next();

    // stop if there is no next element or we reached the .last element
    if (current.is('.last') || next.length === 0){
       clearInterval( timer );
       return;
    }

    current.removeClass('in-progress');
    next.addClass('in-progress');
    },
    timer = setInterval(toggleSlide, 1000);

<强>演示

var toggleSlide = function() {
        var current = $("#provision1 li.in-progress"),
          next = current.next();

        // stop if there is no next element or we reached the .last element
        if (current.is('.last') || next.length === 0) {
          clearInterval(timer);
          return;
        }

        current.removeClass('in-progress');
        next.addClass('in-progress');
      },
      timer = setInterval(toggleSlide, 1000);

.in-progress{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="provision1" class="provisioning-list">
  <li class="in-progress">Configure Active Directory</li>
  <li>Create User Accounts and Groups</li>
  <li>Build Server Configurations</li>
  <li>Create NTFS</li>
  <li>Create Network</li>
  <li>Apply SDN Rules</li>
  <li class="last">Configure Users</li>
</ul>

Answer 2

要停止setInterval();，您可以使用clearInterval();，如下所示：

var intv = setInterval(toggleSlide, 1000);
clearInterval(intv);

Answer 3

使用以下

更改JS

var toggleSlide = function(){
    var $cur_element = $("#provision1 li.in-progress");
    $cur_element.removeClass('in-progress')
  .addClass('complete');
  if($cur_element.hasClass("last")) {
    clearInterval(interval_var);
  } else {
    $cur_element.next().add("#provision1 li:first")
    .last().addClass("in-progress");
  }
}

var interval_var = setInterval(toggleSlide, 1000);

JSFiddle

试图在最后一项上停止setInterval循环

3 个答案: