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

Question

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

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

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

発生している問題

.removeClassを上手く適応させたい。

該当のソースコード

<div class="header">
  <div class="box"></div>
</div>
<div class="container">
  <div class="box"></div>
</div>
<div class="sub">
  <div class="box"></div>
</div>
<div class="footer">
  <div class="box"></div>
</div>

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

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

試したこと

先ほど同一階層にboxがある場合を教えていただいたのですが
別の場合もどなたかご教授いただけますと幸いでございます。

Comments

[m.ts10806]

前の質問の私の回答のコメントに書いた内容では対応できませんか？

自身以外removeClass
→自身をtoggleClass

[ku__ra__ge]

> 発生している問題
> .removeClassを上手く適応させたい。
それは問題ではなく要望です。今回の場合は、発生している問題は「クリックした要素以外が赤に戻らない」ことではないですか？

[WEB_QUESTION]

質問の仕方など上手くなく申し訳ございません。
次回ご質問するときは問題点をもっと明確にしてご質問いたします。

Answer 1

親が同一階層なら、前回の応用で、

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

下記だと同一階層でなくても有効です。

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

Comments

[m.ts10806]

前回notもコメントで追加してたんですけど読まれなかったみたいで残念

[hatena19]

あら、気が付きませんでした。

[WEB_QUESTION]

この度もご丁寧に有難うございます。
現在制作しているものが階層がもっと深いのですが
メソッドの繋ぎ方など参考にして制作したら上手く動くようになりました。

[FKM]

敢えてnotは要らない気はしますけどね。
3行目で指定したクラスに対しactiveクラスを付与している操作をしているわけですし。

[hatena19]

notがないと、下記の仕様に対応できないと思います。

> 黒になったbox自体もクリックすると赤になる仕様です。
> 全部赤になるかor一つだけ黒になる。

[FKM]

了解です。

Answer 2

siblingsは同一階層にある同一クラスの他のものに対し作用するものなので、
現在別クラスの親を持っている限りは、一度遡る必要があります。

<script>
$(function(){
  $('.box').on('click', function () {
    $(this).parents().find('.box').removeClass('active'); //親階層に戻り、そこから.boxを探す
    $(this).toggleClass('active');
  });
});
</script>

Comments

[WEB_QUESTION]

階層の繋げ方など初心者にわかるように丁寧に有難うございます。
.siblings()を入れたら現在制作しているものに上手く適応できました。

Answer 3

$(this).siblings()はthisの兄弟要素を取得します。
質問に提示されたhtmlでは各boxは兄弟要素を持っていないのでremoveClass('active')を実行しても何も起きません。
以下のように各boxが兄弟要素になるようにhtmlを変更してみてください。

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

Comments

[WEB_QUESTION]

兄弟要素ではない場合の仕様が教わりたい内容でした。
次回はもっと質問を明確にいたします。
この度はご返答有難うございました。