JavaScript setInterval函數只在文本中淡化一次

Question

我希望我的代碼在JavaScript中使用setInterval函數淡入淡出文本。 目前它只會運行我的第一段文本，然后一遍又一遍地重復最后一位。 我不確定它是JavaScript還是我的HTML。

<div class="col-md-3">
   <h3 id="RickQuotes" class="text-center">Rick "C137" Sanchez</h3><br />
      <h4 class="fade1">Hello</h4>  
</div>

<script>
    setInterval(function() {
    $('h4').fadeOut(1000, function() {
        var $this = $(this);
        $this.text($this.text() == ' Hello' ? 'Rick and Morty' : '.......');        
        $this.toggleClass('fade1');        
        $this.fadeIn(1000);
    });
}, 3000);
</script>

Answer 1

這是因為你測試文本是否為'Hello'（順便說一下，我不確定'Hello'之前的空格是否有用），如果是，請將它替換為'Rick and Morty'，但如果沒有替換它通過“........”

第一次，它將是假的，因為你的文本將是“你好”，而不是“你好”，在H之前有一個空格，所以它將替換為“........”

第二次，你的文字將是“.......”，這也不等於“你好”，所以它將再次被“.......”等替換。

如果您希望訂單始終相同，請嘗試此操作：

<script>
    setInterval(function() {
    $('h4').fadeOut(1000, function() {
        var $this = $(this);

        const current_text = $this.text();
        const texts = ['Hello', '.....', 'Rick and Morty']
        let new_text = ""
        for( let i = 0; i < texts.Length; i++ )
        {
           if( current_text==texts[i] )
           {
              const n = i < texts.Length-1 ? i+1:0;
              new_text = texts[n];
              break;
           }
        }

        $this.text(new_text);        
        $this.toggleClass('fade1');        
        $this.fadeIn(1000);
    });
}, 3000);
</script>

Answer 2

如果你檢查$this.val()來找到下一個，你到達時會遇到麻煩....因為它可以跟隨Hello或Rick and Morty 。 您必須存儲“Hello”和“Rick and Morty”中的最后一個打印值，以便推斷出“......”之后的內容。

另一種解決方案是具有序列數組和存儲下一個要顯示的項的外部索引。 遞增索引每個循環並在它到達序列長度時重置它。

var index = 0;
setInterval(function() {
    $('h4').fadeOut(1000, function() {
        var $this = $(this);

        var sequence = ['Hello','....', 'Rick and Morty', '....'];

        index = index == sequence.length ? 0 : index;
        $this.text(sequence[index++]);        
        $this.toggleClass('fade1');        
        $this.fadeIn(1000);

    });
}, 2000);

小提琴： https ： //jsfiddle.net/d82btd8m/1/