Change class name with variables in loop

Question

I want to change the name of a class every 2 seconds, based on a list of names (var "items").

I found a pretty good SO here and tried to change it to my needs. It now works for me, but I don't know, how to remove $text and the div "#div1" - because I don't need it. In the other SO it was used to change the html text of the div. But I don't need this, I only want to change the class name of the section - I tried to remove this code, but then it do not work anymore.

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

after the stop function called, put this: $text.remove();

Usman Waheed
– Usman Waheed

2019-09-16 15:47:25 +00:00
Commented Sep 16, 2019 at 15:47 — Usman Waheed
– Usman Waheed, Commented Sep 16, 2019 at 15:47
my final fiddle, thanks to bgaynor78: jsfiddle.net/ary8k30z

Maximilian Neuse
– Maximilian Neuse

2019-09-16 16:31:31 +00:00
Commented Sep 16, 2019 at 16:31 — Maximilian Neuse
– Maximilian Neuse, Commented Sep 16, 2019 at 16:31

bgaynor78 · Accepted Answer · 2019-09-18 15:38:50Z

1

So, I simplified how you're adding/removing classes:


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

Basically, we'll take the current index and add the class like you had, but in order to remove the class that was there before, I'm just going back to the previous index value. I also changed the value of the $text var to be pointing to your step div.

Here is the updated Fiddle

edited Sep 18, 2019 at 15:38

answered Sep 16, 2019 at 16:18

bgaynor78

4542 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bgaynor78 Over a year ago

You don't actually need the .hide() or .show() on the $text element either. I've updated the fiddle and my answer to reflect this

Maximilian Neuse Over a year ago

I have no idea why, but this is not working with jquery 2.1.3, which I am using. :S With this jquery version, the last added class (three in this cases) will not be removed.

bgaynor78 Over a year ago

I see, not sure what changed from v1.7.1 to 2.1.3 in jquery about how it's handling this, but the simpliest solution I could come up with was to santize the classlist before each addClass() call. I've updated the answer and the fiddle to show. Basically, just change the class attribute to the base class with $text.attr('class', 'step'); before the add class in the loop function.

Collectives™ on Stack Overflow

Change class name with variables in loop

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related