jQuery |クリック時のクラスの追加/削除|

Question

今日のベストプラクティスは、私がゲーラリーとして画像の数を設定する必要がありました。それは4か何かの行にそれらを表示することが可能にwasn'tので、私は、画像をスタックしていたこのサイトのモバイル版に 。

はまだ画像がそうI'veが100ピクセルの高さにそれらを縮小し、その全高さまで延びてそれらをクリックできることに決めたモバイルビューの（350px）非常に高かったです。

私は再び350pxに高さを設定します「拡張」と呼ばれるクラスを追加または削除することによって、これをしませんでした。

私はこの作品が、まだ、これはあなたがベストプラクティスを呼ぶだろうか、それが簡単に行うことができれば何であれば - 私がわからないために使用するJavaScript：私はこの質問をしisn'tを願っ

$('.galery__img--fragrance').on('click', function() { 
    if($(this).hasClass('extended')) { 
     $(this).removeClass('extended'); 
    } else { 
     $(this).parent().find('.extended').removeClass('extended'); 
     $(this).addClass('extended'); 
    } 
    }); 

冗長ですが、私はJS/jQueryの新機能です。それを正しくやりたいと思っています:-)

編集：もう一度クリックすると、画像が100pxの高さまで崩壊したまたは別の画像が

Answer 1

使用.toggleClass() FUNCをクリックした場合

$('.galery__img--fragrance').on('click', function() { 
    $(this).toggleClass('extended'); 
});