我有一个很大的<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');
}
});
});
发生的情况是,它不会允许单独单击“放大”按钮,而是只单击一次并同时执行两个语句。
有什么建议么?