Question

I want to loop over an array continuously on click. Extra props if you can work in a delay between class switches 🙂

I got this far:

// Define word
var text = "textthing";

// Define canvas
var canvas = 'section';

// Split word into parts
text.split();

// Loop over text
$(canvas).click(function() {

    $.each(text, function(key, val) {
        $(canvas).removeAttr('class').addClass(val);
    });

});

Which is not too far at all 🙂

Any tips?

Answer 1

The following will wait until you click the selected element(s) in the var el. In this example var el = $('section') will select all <section>...</section> elements in your document.

Then it will start cycling through the values in cssClassNames, using each, in turn as the css class name on the selected element(s). A delay of delayInMillis will be used between each class change.

var cssClassNames = ['c1', 'c2', 'c3'];
var el = $('section');
var delayInMillis = 1000;

// Loop over text
el.click(function() {
  var i = 0;
  function f() {
    if( i >= cssClassNames.length ) {
      i = 0;
    }
    var currentClass = cssClassNames[i];
    i += 1;

    el.removeClass().addClass(currentClass);
    setTimeout(f, delayInMillis);
  }
  f();
});