18

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

何が起こるかというと、「大きくする」ボタンを個別にクリックできるようにするのではなく、1 回クリックするだけで 2 つのステートメントを同時に実行するということです。

助言がありますか？

4

1 に答える 1

40

を使用するだけで済みます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');
}
于 2012-09-02T19:05:58.553 に答える