2

Jquery を使用して一部の画像の css を変更しています。

クリックすると機能し、画像のCSSサイズが変更されます。唯一の問題は、次の画像をクリックすると、前の画像が新しい css トグルにとどまることです。

次の画像をクリックすると、前の画像が元の CSS に戻る方法はありますか。

ここに jsfiddle の例を含めました: http://jsfiddle.net/webdott/hSFpp/

jqueryコードは次のとおりです。

$('img').click(function() {
    $(this).toggleClass('thumb fullview')
});

クリックした各画像が大きいままであることがわかります。

ありがとう

4

3 に答える 3

4

クリックされた要素にクラスを追加する前に、fullview他のすべての要素からクラスを削除する必要があります。imgこれを試して：

$('img').click(function() {
    $('img').removeClass('fullview'); // remove class from all
    $(this).addClass('fullview'); // add class to clicked img
});

更新されたフィドル

于 2013-08-10T18:55:29.697 に答える
1

img「fullview」のクラスを削除してから追加してみてください$(this)。

$('img').click(function() {
    $('img').removeClass('fullview');
    $(this).addClass('fullview');
});

フィドル

アップデート：

私たちは両方とも問題を解決しましたが、大きな画像をクリックしても切り替えられないことに気付きました。次のコードにそのための関数を追加しました。

if ( $('img').hasClass('fullview') ) {
    $(this).click(function() {
        $(this).removeClass('fullview');
});
}

更新されたフィドル

于 2013-08-10T19:01:07.633 に答える