Question

I have four classes show,hide1,hide2, and hide3. I want to change each of these classes and replace it with the one next to it. In other words, my jQuery code looks like this…

$(".show").removeClass("show").addClass("hide1");
$(".hide1").removeClass("hide1").addClass("hide2");
$(".hide2").removeClass("hide2").addClass("hide3");
$(".hide3").removeClass("hide3").addClass("show");

The problem is that the four classes end up all having the show class which is not what I want. I just want the classes of show to convert to hide1, hide1 convert into hide2, etc. How could I write the code so that those four lines all happen at once, instead of one at a time?

Answer 1

Just select each group first, then alter:

// read
var $show = $('.show');
var $hide1 = $('.hide1');
var $hide2 = $('.hide2');
var $hide3 = $('.hide3');

// write
$show.removeClass('show').addClass('hide1');
$hide1.removeClass('hide1').addClass('hide2');
$hide2.removeClass('hide2').addClass('hide3');
$hide3.removeClass('hide3').addClass('show');