jQuery reemplazar clase

Question

Tengo una larga lista de <li> que tienen un ancho de clase 'span3'.

<ul class="thumbnails"> 
    <li class="span3"> 
     <div class="thumbnail"><img src="/images/logos-s/s-001.png" alt="" data-creator="swc"> <span>01</span></div> 
    </li> 
    repeat...40x 
</ul> 

que tienen botones (button#grid-bigger & & button#grid-smaller) que permiten a los usuarios para aumentar y disminuir el tamaño de la cuadrícula al hacer clic. Idealmente, el usuario podría hacer clic tres veces, y cada vez cambiaría la clase <li> de span3 a span4 y luego a span12.

Aquí está el JavaScript:

$('#grid-bigger').live('click', function (e) { 
    $('#blob .thumbnails').find('li').each(function(i, ojb) { 
     if ($(this).hasClass('span2')) { 
      $(this).removeClass('span2').addClass('span3'); 
     } 

     if ($(this).hasClass('span3')) { 
      $(this).removeClass('span3').addClass('span4'); 
     } 

     if ($(this).hasClass('span4')) { 
      $(this).removeClass('span4').addClass('span12'); 
     } 
    }); 
}); 

Lo que ocurre es que en lugar de permitir pulsaciones separadas al botón de "hacer más grande", que sólo va a hacer clic una vez y ejecutar dos de los estados al mismo tiempo.

¿Alguna sugerencia?

Answer 1

sólo tiene que utilizar else if, de lo contrario, todo se ejecutarán en orden:

if ($(this).hasClass('span2')) { 
    $(this).removeClass('span2').addClass('span3'); 
} else if ($(this).hasClass('span3')) { 
    $(this).removeClass('span3').addClass('span4'); 
} else if ($(this).hasClass('span4')) { 
    $(this).removeClass('span4').addClass('span12'); 
}