Question

I need to remove existing class of an element and add another class…or shortly I want to replace a specific class having letters ‘border’ as substring by another class with letters ‘border’ as substring.

I have to toggle among 8 classes. I tried to select previous class like strClass=$("#"+styleTarget[class*='border']), but it failed.

Will “toggle” help me in this?

Answer 1

You could do something like this:

var classes = ['border1', 'border2', 'border3', 'border4'];
$("div[class*='border']").click(function() {
  for(var i=0; i<classes.length; i++) {
    if($(this).hasClass(classes[i])) {
      $(this).removeClass(classes[i]).addClass(classes[(i+1)%classes.length]);
      break;
    }
  }
});

You can try it here, it’ll work for any number of classes, just add as many as you want to cycle through. The concept is pretty straight-forward, when an element’s clicked we loop through the array, if we find a class it has (via .hasClass()), we remove it (via .removeClass()) and give it the next class (via .addClass()).

The (i+1)%classes.length modulus is to handle wrapping around to the beginning of the array when it currently has the last class in it.