jQuery替換類

Question

我有一個從'span3'類給出寬度爲<li>的大列表。

<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），允許用戶增加和降低電網的規模上點擊。理想情況下，用戶可以點擊三次，並且每次都會將<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'); 
     } 
    }); 
}); 

什麼情況是，而不是讓單獨點擊了「做大」按鈕，它會只點擊一次，並在同一時間執行兩個語句。

有什麼建議嗎？

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