jquery - 从 jQuery 重置默认 CSS

Question

我正在使用网格布局(Bootstrapper)来按行显示特定宽度的图像。

<li class="span4"><div id="id" class="thumbnail"><img src="**path**"><img></div></li>
<li class="span12"><div id="id-2" class="thumbnail"><img src="**path**"><img></div></li>
<li class="span3"><div id="id-3" class="thumbnail"><img src="**path**"><img></div></li>

我希望能够在用户单击图像时使图像的宽度跨越所有列(class =“span12”)，并在用户单击图像时将图像恢复为图像的“硬编码”类别再次点击图像。

if (current_span != 'span12') // If image is not already spanning all columns ("span12")
{
$(this).attr('class','span12'); // Add class to span all columns
}

使用上面的JS，单击一次后图像就会以正确的宽度显示。

但是，在第二次单击时，我想恢复到“硬编码”类，因为并非所有图像都具有相同的类(即，一些属于“span3”，其他属于“span4”，其他属于“span4”) “span12”。

有没有办法在第二次点击时从 HTML 恢复到“硬编码”类？

Answer 1

CSS 类会级联，因此队列中的最后一个类将覆盖前面的所有类。您应该能够简单地使用 jQuery 打开/关闭“span12”类:

$(this).toggleClass('span12');