jQueryで複数の選択肢からクリックした物だけ色を変える

Question

jQueryの勉強中です。
初期状態では赤の4つのboxがありクリックした物だけ色を黒にし、
それと同時にクリックされた物以外は赤にしたいと思っています。

黒になったboxもクリックすると赤になる仕様です。

全部赤になるかor一つだけ黒になる。

###発生している問題

あるboxが黒の時に他のboxをクリックすると黒のboxは赤に戻るが
クリックした赤のboxが黒にならない。

該当のソースコード

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box {
 width: 100px;
 height: 100px;
 background: red;
 margin: 0 auto 10px;
}
.active {
 background: black;
}

.$(function(){
$('.box').on('click', function () {
if ($('.box').hasClass('active')) {
$('.box').removeClass('active');
} else {
$(this).toggleClass('active');
 }
});
 });

Answer 1

$(this).siblings() で自分以外の兄弟要素を取得できます。

$(function(){
  $('.box').on('click', function () {
    $(this).siblings().removeClass('active');
    $(this).toggleClass('active');
  });
});

Comments

[WEB_QUESTION]

無事解決しました。
半日以上一人で迷っていたことが数分で解決すると思っていなかったので勉強不足を痛感しております。
本当に有難うございます。

[hatena19]

「jQuery 自分以外の兄弟」で検索するとコード例がすぐ見つかりますよ。
半日無駄にすることはなかったですね。

Answer 2

今のロジックだと「誰も.activeを持ってないとき」にしかaddされません。

ひとまず、hasClassで確認せずにremoveClassしてしまえば良いのでは。
分岐は不要。
否応無しに全部remove、自身だけadd

Comments

[WEB_QUESTION]

ご回答有難うございます。
その方法ですとクリックした赤のboxが黒になりますが
もう一度同じboxをクリックした時に黒のままで赤にならなくなってしまいます。
色々同様の手法を調べてはみたのですが上手くいかず。難しいですね。

[m.ts10806]

失礼。
自身以外を削除
→自身をトグル
ですね。

$('.box').not(this).removeClass('active');

[m.ts10806]

あれごめんなさい。
同時に複数黒ってあるんでしたっけ？ないからremoveしてるものだと思いこんでました