ジャバスクリプトで押したスイッチだけを色付けるようにさせたいです。

スイッチを押した時、押したスイッチが色付くような感じにしたいです。
一番左のスイッチを押した時はちゃんと色付くのに真ん中、右のスイッチは色づかなくて
下記のような形になります。

jsの記述の仕方が多分悪いのですがどう記述すれば良いかわかりません。
わかる方いらっしゃいましたらご返答お願い致します。

何も押してない時

一番左のスイッチを押した時

真ん中のスイッチを押した時

一番右のスイッチを押した時

HTML
1
2            <div class="setup-action__switch">
3              <div id="test" class="setup-action__switch-body">
4                    <div id="a" class="setup-action__switch-body-a"></div>
5                    <div id="b" class="setup-action__switch-body-b"></div>
6              </div> 
7            </div>
8
9

.setup-action {

    &__switch {
        /* スイッチ台座部分 */
        width: 200px;
        height: 50px;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #d3d3d3;
    }

    &__switch-body {
        /* スイッチ側面一部（両端） */
        position: relative;
        top: -18px;
        display: block;
        margin: 0 auto;
        width: 160px;
        height: 40px;
        background-color: #dcdcdc;
   
    }

    &__switch-body-a,
    &__switch-body-b {
        /* スイッチ底面、頭構成部分 */
        position: absolute;
        left: 0;
        display: block;
        width: 160px;
        height: 40px;
        border-radius: 100%;
        content: '';
    }

    &__switch-body-a {
        /* スイッチ底面：位置調整とスタイル */
        bottom: -20px;
        background-color: #dcdcdc;

    }

    &__switch-body-b {
        /* スイッチ頭：位置調整とスタイル */
        top: -20px;
        background-color: #f5f5f5;
    }

    &__switch-body:active {
        /* クリックアニメーション */
        height: 20px;
        top: 2px;
    }
}

.is-active {
    /* 選択時スイッチ */
    height: 28px;
    top: -6px;
    background-color: #dc143c;
    display: block;
}

.is-active-a {
    /* 選択時スイッチ */
    background-color: #dc143c;
}

.is-active-b {
    /* 選択時スイッチ */
    background-color: #ff0000
}

Javascript
1/* スイッチクリックアクション */
2$(function(){
3    $('.setup-action__switch-body').on('click', function(event){
4       event.preventDefault(); 
5       
6        $(this).toggleClass('is-active');
7        $('#a').toggleClass('is-active-a');
8        $('#b').toggleClass('is-active-b');
9
10
11    });
12});
13
14

new 1 ro様のアドバイスより

同ページにidが複数あるとご指摘があったため全てidを削除し、クラスセレクタに変更しました。
new 1 ro様ご指摘ありがとうございます！

HTML
1 <% @selected_verbs.each do |verb| %>
2            <div class="setup-action__switch">
3              <div class="setup-action__switch-body">
4                    <div class="setup-action__switch-body-a"></div>
5                    <div class="setup-action__switch-body-b"></div>
6              </div> 
7            </div>
8          </li>
9

Javascript
1/* スイッチクリックアクション */
2$(function(){
3    $('.setup-action__switch-body').on('click', function(event){
4       event.preventDefault(); 
5       
6        $(this).toggleClass('is-active');
7        $('setup-action__switch-body-a').toggleClass('is-active-a');
8        $('setup-action__switch-body-b').toggleClass('is-active-b');
9
10
11    });
12});
13
14

⬇️結果



押したスイッチにしっかりと色がつくようになりましたが他のボタンにも
色がつくようになってしまいました。
解決方法わかる方お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

idはページ内に1つしか指定できません。
おそらく、#aと#bが、3つずつ出力されてしまっています。classにしてください。

<div id="test" class="setup-action__switch-body">
  <div id="a" class="setup-action__switch-body-a"></div>
  <div id="b" class="setup-action__switch-body-b"></div>
</div>

CodePenで実装してみました。
以下のように実装すると、問題が解決できそうです。

HTML
1<ul class="switch-group">
2  <li id="switch-01">
3    <div class="setup-action__switch">
4      <div class="setup-action__switch-body">
5        <div class="setup-action__switch-body-a"></div>
6        <div class="setup-action__switch-body-b"></div>
7      </div>
8    </div>
9  </li>
10  <li id="switch-02">
11    <div class="setup-action__switch">
12      <div class="setup-action__switch-body">
13        <div class="setup-action__switch-body-a"></div>
14        <div class="setup-action__switch-body-b"></div>
15      </div>
16    </div>
17  </li>
18  <li id="switch-03">
19    <div class="setup-action__switch">
20      <div class="setup-action__switch-body">
21        <div class="setup-action__switch-body-a"></div>
22        <div class="setup-action__switch-body-b"></div>
23      </div>
24    </div>
25  </li>
26</ul>

SCSS
1// 変更箇所。
2// .is-activeに集約。「.is-active-a」と「.is-active-b」は削除
3
4// .is-active-a {
5.is-active .setup-action__switch-body-a {
6    /* 選択時スイッチ */
7    background-color: #dc143c;
8}
9
10// .is-active-b {
11.is-active .setup-action__switch-body-b {
12    /* 選択時スイッチ */
13    background-color: #ff0000
14}
15
16// 見た目を調整するため追加。不要なら消してください。
17.switch-group {
18  margin: 100px 0;
19  display: flex;
20  justify-content: center;
21  
22  li {
23    margin: 0 auto;
24    display: block;
25  }
26}

jQuery
1/* スイッチクリックアクション */
2$(function(){
3    $('.setup-action__switch-body').on('click', function(event){
4       event.preventDefault(); 
5        $(this).toggleClass('is-active');
6        
7        // .is-activeに集約するため、「.is-active-a」と「.is-active-b」は削除
8        // $('#a').toggleClass('is-active-a');
9        // $('#b').toggleClass('is-active-b');
10    });
11});