jQuery replace class

Question

Ho una grande lista di <li> che hanno una larghezza da una classe '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> 

devo pulsanti (button#grid-bigger & & button#grid-smaller) che permettono agli utenti di aumentare e diminuire le dimensioni della griglia al clic. Idealmente, l'utente sarebbe in grado di fare clic tre volte, e ogni volta cambierebbe la classe <li> da span3 a span4 poi a span12.

Ecco il 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'); 
     } 
    }); 
}); 

Quello che succede è che invece di permettere scatti separati al pulsante "rendere più grande", che sarà fare clic su una sola volta ed eseguire due delle dichiarazioni allo stesso tempo.

Qualche suggerimento?

Answer 1

si solo bisogno di usare else if, altrimenti saranno tutti eseguiti nello stesso ordine:

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