jQueryでクリックした場所に赤枠を付けたいです

質問

度々恐縮ですが、またjQueryに関してお知恵を拝借ください。

下記ページにスライダーを設置していますが、
サムネイル画像をクリックした時と、オンマウスした時に、サムネイル画像に赤枠（CSSのボーダー）を付けたいです。

http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html

サムネイルをクリックした時、サムネイルに赤枠をつけるまでならなんとか出来そうなのですが、
選択中のサムネイルとは別のサムネイルをクリックした時に、
選択中のサムネイルからは赤枠が消え、新しく選択したサムネイルに赤枠をつける・・
という動きに悩んでおります。

どなたかご教授くださいませ。

宜しくお願い致します。

回答No.1

LancerVII · ベストアンサー

こんにちは。

難しく考えることは無いです。
一度、全ての画像から枠を消す処理を入れれば良いだけです。

$(function(){
$(".changeBox .thumBox img").click(function(){
$("div.mainImg img", $(this).parents(".changeBox")).attr("src", $(this).attr("src"));
// 自分の親の.changeBox内のimgに対してselected属性を削除
$(this).parents('.changeBox').find('img').removeClass('selected');
// クリックされた画像にselected属性を追加
$(this).addClass('selected');
});
});

こんな感じでしょうか。

お礼

LancerVII様

なるほど！素晴らしい発想ですね・・
まったく思いつきませんでした・・

おかげ様で希望通りのデザインが出来そうです。

非常に助かりました。
本当に有難うございました！