使用循环中的变量更改类名

Question

我想根据名称列表（var "items"）每 2 秒更改一次类的名称。

我找到了一个很好的 SO here 并尝试根据我的需要进行更改。它现在对我有用，但我不知道如何删除 $text 和 div "#div1" - 因为我不需要它。在另一个 SO 中，它用于更改 div 的 html 文本。但我不需要这个，我只想更改该部分的类名 - 我试图删除此代码，但它不再起作用了。

HTML：

<section class="steps">class name of this section changes (see inspector)</section>
<div id="div1"></div> <!-- this could be removed -->
<button>Stop it Now.</button>

JS：

$(document).ready(function() {

    var items = ["one", "two", "three"],
        $text = $( '#div1' ),
        $step = $( 'section.steps' ),
        delay = 2; //seconds

    function loop ( delay ) {
        $.each( items, function ( i, elm ){
            $text.delay( delay*1E3).hide();
            $text.queue(function(){
                $text.html( items[i] );
                $text.dequeue(); // this is not needed
                $step.addClass( items[i] ).delay(2000).queue(function(){
                  $(this).removeClass( items[i] ).dequeue();
                });
            });
            $text.show();
            $text.queue(function(){
                if ( i == items.length -1 ) {
                    loop(delay);   
                }
                $text.dequeue();
            });
        });
    }

    loop( delay );

    $("button").on("click", function() {
        $text.stop(true, false);
    })
});

Fiddle

Answer 1

所以，我简化了您添加/删除类的方式：

function loop ( delay ) {
        $.each( items, function ( i, elm ){
            $text.delay( delay*1E3);
            $text.queue(function(){
                $text.html( items[i] );
                $text.dequeue(); // this is not needed
                // Sanitize the classlist
                $text.attr('class', 'step');
                // Added these two lines instead of the queue/dequeue
                $text.addClass( items[i]);
            });

            $text.queue(function(){
                if ( i == items.length -1 ) {
                    loop(delay);   
                }
                $text.dequeue();
            });
        });
    }

基本上，我们将采用当前索引并像您一样添加类，但为了删除之前存在的类，我只是回到之前的索引值。我还将$text var 的值更改为指向您的step div。

这是更新后的Fiddle