jQueryがクラスを置き換える

Question

<li>の大きなリストは '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> 

私は、ユーザーがクリックでグリッドのサイズを増減するためのボタン（button#grid-bigger & & button#grid-smaller）を持っています。理想的には、ユーザーは3回クリックすることができ、<li>クラスをspan3からspan4、次にspan12に変更するたびにクリックすることができます。

は、ここでは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'); 
     } 
    }); 
}); 

何が起こるかは、代わりにボタン「大きなを作る」とは別のクリックを可能にする、それは一度だけクリックしますと同時にステートメントのうちの2つを実行することです。

提案がありますか？

Answer 1

あなただけそう、彼らはすべてのために実行されます、else ifを使用する必要があります。

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