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”，其他属于“span12” .

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

Answer 1

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

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

Answer 2

你需要为此上课吗？如果上一个答案不起作用，您可以尝试

$(this).css('column-span','all');

如果您没有语言环境样式属性，则将其删除

$(this).removeAttr( 'style' );

或其他

$(this).css('column-span','');