我有一个很大的列表< 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>
我有按钮(按钮#grid-greater&& 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');
}
});
});
会发生什么，而不是单独点击“做大”按钮，它只会点击一次，同时执行两个语句。
有什么建议么？
解决方法
你只需要使用else，否则它们将按顺序执行：
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');
}
