jQuery thay thế lớp

Question

Tôi có một danh sách lớn các số <li> được cho chiều rộng từ một lớp '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> 

tôi có các nút (button#grid-bigger & & button#grid-smaller) cho phép người sử dụng để tăng và giảm kích thước của lưới điện trên nhấp chuột. Lý tưởng nhất, người dùng sẽ có thể bấm ba lần, và mỗi lần nó sẽ thay đổi lớp <li> từ span3 đến span4 rồi đến span12.

Đây là 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'); 
     } 
    }); 
}); 

gì sẽ xảy ra là thay vì cho phép nhấp chuột riêng biệt để nút "làm lớn", nó sẽ chỉ bấm một lần và thực hiện hai trong số những điều khoản cùng một lúc.

Mọi đề xuất?

Answer 1

bạn chỉ cần sử dụng else if, nếu không tất cả họ sẽ thực hiện theo thứ tự:

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