javascript - 循环淡入淡出句子中的单词

Question

我一直试图让 HTML 页面中的一句话中的一个词经历一个变化循环。我只希望它循环一次，但现在我已经获得了一旦我看不到单词就循环的代码。

我使用 jQuery 使其淡入和淡出，我知道它在递增，只是它们不会出现在数组的屏幕上。第一个和最后一个单词出现，但中间的数组中没有任何内容。

我已经找到了使用数组进行永无止境循环的方法，但我希望它在到达最后一个索引后停止，并在此之后停留在一个词上。

非常欢迎提供解决此问题的其他方法的任何帮助或想法。

#changeMainText{
    color: #34495E;
    opacity: 1;
    transition: opacity 0.5s;
}
.hide{
    opacity: 0 !important;
}

<div id="main">
    <h1>I am <span id="changeMainText" style="color:#34495E">a Product
    Manager</span>.</h1>
</div>

$(document).ready(function() {
    var mainText = ["a Programmer", "a Web Developer", "a Student"];
    var counter = -1;
    var textInterval;
    var elem = document.getElementById("changeMainText");
    var elem1 = "-1";
    textInterval = setInterval(changeText(counter), 2500);

    function changeText(counter) {
        elem.classList.add('hide');
        setTimeout(function() {
            elem.innerHTML = mainText[counter];
            elem.classList.remove('hide');
            counter = counter + 1;
            document.getElementById("changeMainText").style
                .color = "#34495E";
            if (counter < mainText.length) {
                elem.innerHTML = mainText[counter];
                changeText(counter);
            }
            if (counter == 3) {
                document.getElementById("changeMainText").style
                    .color = "red";
                elem.innerHTML = "a Person";
                clearInterval(textInterval);
            }
        }, 2500);
    }
});

Answer 1

您的代码有点困惑。并且可以简化很多。您从 $( document ).ready( function () {} ); 开始，但之后不要使用 jQuery。如果您正在使用 jQuery，让它帮助您。

var loopText = [
  'a Product Manager',
  'a Programmer',
  'a Web Developer',
  'a Student'
];
var i = 0;
var max = loopText.length;
var $text = $('#swap-text');
var css = {};

// Immediately Invoked Named Function Expression - we define it then
// immediately call it by the parenthesis after the closing bracket,
// function (){}(). Once it has done it's work we call it again with
// `setTimeout()` as long as our counter `i` is not equal to the 
// number of entries in the `loopText` array.
(function changeText() {

  if (i < max) {

    if (i === (max - 1)) {
      css['color'] = 'red';
    }

    $text
      .fadeOut(0)
      .text(loopText[i++])
      .css(css)
      .fadeIn(500);

    setTimeout(changeText, 2500);

  }

}());

#swap-text {
  color: #34495E;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>I am <span id="swap-text"></span>.</h1>