JQuery заменить класс

У меня есть большой список <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), которые позволяют пользователям увеличивать и уменьшать размер сетки при нажатии. В идеале пользователь мог бы щелкнуть три раза, и каждый раз он меняет класс <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');
        }
    });
});

Что происходит, так это то, что вместо того, чтобы разрешать отдельные клики по кнопке "сделать больше", он будет только щелкать один раз и одновременно выполнять два оператора.

Любые предложения?

Ответы

Ответ 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');
}