1

グリッド レイアウト (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 を使用すると、ワンクリックで画像が正しい幅で表示されます。

ただし、2 回目のクリックでは、すべての画像が同じクラスであるとは限らないため、「ハードコードされた」クラスに戻したいと思います (つまり、一部は「span3」に属し、他は「span4」に属し、他は「span12」に属します)。 .

2 回目のクリックで HTML から「ハードコードされた」クラスに戻す方法はありますか?

4

2 に答える 2

3

CSSクラスはカスケードされるため、キューの最後のクラスが前のクラスを上書きします。jQueryで「span12」クラスのオン/オフを簡単に切り替えることができるはずです。

$(this).toggleClass('span12');
于 2012-08-31T08:40:19.330 に答える
2

そのためにクラスが必要ですか？前の答えがうまくいかない場合は、試すことができます

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

ロケールスタイル属性がない場合は、それを削除します

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

もしくはそうでないか

$(this).css('column-span','');
于 2012-08-31T09:09:14.947 に答える