Javascript引用循环跳转到第一个结束后

Javascript quotes loop - jump to the first after finishing

本文关键字：第一个 结束 引用 循环 Javascript      更新时间：2023-09-26

我的脚本有问题，因为一旦所有的子元素循环通过我不能回到第一个元素。

https://jsfiddle.net/pad5bp0o/2/

$(document).ready(function() {
  var length = $("#tips li").length;
  var old = 0;
  function show() {
    var news = getRan();
    $("#tips li").hide();
    $("#tips li:nth-child(" + news + ")").fadeIn("fast");
    old++;
  };
  function getRan() {
    var news = old + 1;
    if (news < length) {
      return news;
    } else {
      var news = 0 + 1;
      return news;
      old++;
    }
  };
  show();
  $("#something").html(length);
  setInterval(show, 1000);
});
#tips,
#tips li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#tips {
  width: 250px;
  font-size: 16px;
  line-height: 120%;
}
#tips li {
  padding: 20px;
  background: #e1e1e1;
  display: none;
  /* hide the items at first only */
}
.active {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="tips">
  <li>... if you want to become a better coder you need to eat your vegetables?</li>
  <li>... it takes more time to code a web page then to make a pizza?</li>
  <li>... you should validate your code?</li>
  <li>... jQuery is your friend? For real!</li>
  <li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>
<div id="something"></div>

到达最后一个元素时需要重置old变量

function getRan() {
    var news = old + 1;
    if (news <= length) {
        return news;
    }
    news = 1;
    old = 0;
    return news;
};
演示

一旦达到限制(5)，将变量(old)重置为初始值(1)

你也可以像下面这样简化函数。更新小提琴

$(document).ready(function() {
  var length = $("#tips li").length;
  var old = 1;
  function show() {
    $("#tips li").hide();
    $("#tips li:nth-child(" + old + ")").fadeIn("fast");
    if (old == length) {
      old = 1;
    } else {
      old++;
    }
  };
  show();
  $("#something").html(length);
  setInterval(show, 1000);
});
#tips,
#tips li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#tips {
  width: 250px;
  font-size: 16px;
  line-height: 120%;
}
#tips li {
  padding: 20px;
  background: #e1e1e1;
  display: none;
  /* hide the items at first only */
}
.active {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tips">
  <li>1. ... if you want to become a better coder you need to eat your vegetables?</li>
  <li>2. ... it takes more time to code a web page then to make a pizza?</li>
  <li>3. ... you should validate your code?</li>
  <li>4. ... jQuery is your friend? For real!</li>
  <li>5. ... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>
<div id="something"></div>

相关文章：