jquery - jQuery替换类

Question

我有一个很大的<li>'s 列表，它们从 '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');
        }
    });
});

发生的情况是，它不会允许单独单击“放大”按钮，而是只单击一次并同时执行两个语句。

有什么建议么？

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