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，请告诉我们。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题出在您的css：

中

 .hide{
    opacity: 0 !important;
  }

不透明度不允许显示文本。尝试删除它或将其更改为opacity: 1

如果您正在寻找淡入或淡出效果，您可以这样做：

$(document).ready(function() {
    var mainText = ["a Programmer", "a Web Developer", "a Student","a Person"];
    var elem = document.getElementById("changeMainText");

 function repeat(i){
    if (i<mainText.length){
       setTimeout(function(){
          $(elem).fadeOut('slow').html(mainText[i]).fadeIn('slow');i++
            repeat(i);
       },2500);
    }
}

repeat(0);

Answer 3

所以，你要设置一个每2.5秒运行一次的间隔。函数的第一件事就是隐藏elem。然后它设置超时以设置文本并在2.5秒后显示elem。这是计划运行下一个间隔的时间，它会立即应用hide类。

我建议一起摆脱间隔，然后退一步看看你的问题。这是一个糟糕的ascii艺术流程图，它描述了我认为你想要实现的东西：

initial state -> hide -> change text -> show -> next? --no-> stop playing
                   ^----------------------yes----/

所以，我认为你需要两个功能;一个更改文本并启用elem进行显示，另一个检查是否可以继续移动到数组的下一个元素并采取相应的行动。

function changeTextAndShow() {
    // set the text with the current position
    elem.innerHTML = mainText[counter];

    // funny stuff
    if(counter == mainText.length - 1) {
        document.getElementById("changeMainText").style
            .color = "red";
    } else {
        document.getElementById("changeMainText").style
            .color = "#34495E";
    }
    // show the elem
    elem.classList.remove('hide');

    // schedule the next change
    counter++;
    setTimeout(continueText, 2500);    
}

function continueText() {
    // if there's more text to display
    if(counter < mainText.length) {
        elem.add('hide');
        // being blank for 2.5s might not be what you want.
        // change this to the duration you really want it empty
        setTimeout(changeTextAndShow, 2500);
    }
}

然后使用它就像是：

var mainText = ["a Programmer", "a Web Developer", "a Student", "a Person"];
var counter = 0;
var elem = document.getElementById("changeMainText");
setTimeout(continueText, 2500);

在一个循环中淡入和淡出句子中的单词

3 个答案: