別の画像をクリックした場合は、そのクラスを削除して新しい画像に追加してください。

Question

私は4つの画像を含むリストを持っています。それぞれの画像は、任意の時点で1つのアクティブなクラスのみを持つ必要があります。 （ラジオボタンに似ています）。

私のコードは、これまでのところ、この罰金をサポートしています。 http://jsfiddle.net/tctc91/HyHgp/

var themeChooser = $('.themeChooser ul li img'); 
themeChooser.click(function() { 
    if(!themeChooser.hasClass('themeSelected')) { 
     $(this).addClass('themeSelected');   
    } else { 
     $(this).removeClass('themeSelected'); 
    } 
}); 

私の問題は.themeSelectedクラスがすでにアクティブになっているときに別の画像をクリックすると、それは動作しませんということです。私はそれが既にアクティブで、別のイメージをクリックすると、既存のクラスを削除し、それを新しいイメージに追加する必要があります。

ありがとうございます！

Answer 1

クリックハンドラーの中に$('.themeSelected').removeClass('themeSelected');を単純に追加すると、あなたが望むものが得られます。

ライブ例：http://jsfiddle.net/sT9jE/

---

編集は：それほど単純ではない、上記の選択を解除選択した要素の上に再クリック停止します。したがって、あなたが実際にこの追加を必要とする：

if(!$(this).hasClass('themeSelected')) 
    $('.themeSelected').removeClass('themeSelected'); 

は、このライブの例を参照してください：http://jsfiddle.net/HM5DF/