класс переключения, который будет воздействовать только на один элемент за раз

Question

У меня есть два примера одного и того же элемента рядом. Мне нужно иметь возможность переключать класс только по одному за раз. С моим текущим Javascript они оба переключаются одновременно.

Это часть руководства по стилю, которое разработчики бэкэнда используют для создания внешнего интерфейса, поэтому я не могу иметь посторонние классы, которые предназначены только для javascript. Этот пример только для руководства по стилю, он работает в реальном приложении, используя groovy / grails.

Любые советы приветствуются!

    $('.toggle-button-wrapper').on('click', function(e) {
      $('.toggle-button').toggleClass("toggle-button-selected");
    e.preventDefault();
    });

.toggle-button-wrapper {
    display: flex;
}

.toggle-btn-dark .toggle-button-wrapper {
        margin-bottom: 0;
        margin-right: 1rem;
  }
  .toggle-btn-dark .toggle-button {
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3.6rem;
            height: 2.4rem;
            background-color: #ccc;
            color: black;
            &:hover {
                background-color: darken(#ccc, 5%);
            }
            
        }
        .toggle-btn-dark .toggle-button .icon {
                fill: black;
                margin: auto;
            }
  .toggle-btn-dark .toggle-button-selected {
            background: purple;
            fill: white;
            color: white;
            &:hover,
            &:active {
                cursor: default;
                background-color: lighten(purple, 5%);
            }
           }
 .toggle-btn-dark .toggle-button-selected .icon {
      fill: white;
  }



 .toggle-btn-light.toggle-button-wrapper {
        margin-bottom: 0;
        margin-right: 1rem;
        }
        .toggle-btn-light .toggle-button {
            border: 1px solid #ccc;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3.6rem;
            height: 2.4rem;
            background-color: pink;
            color:  black;
            &:hover {
                background-color: darken(pink, 5%);
            }
           }
            .toggle-btn-light .toggle-button .icon {
                fill: black;
                margin: auto;
            }
     
        .toggle-btn-light .toggle-button-selected {
            background-color: hotpink;
            color:  white;
            &:hover,
            &:active {
                cursor: default;
                background-color: darken(hotpink, 5%);
            }
            }
    .toggle-btn-light .toggle-button-selected .icon {
                fill: white;
            }

.toggle-button.first{
        border-left-style: none;
        border-top-left-radius: 1.4rem;
        border-bottom-left-radius: 1.4rem;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
}

.toggle-button.last  {
        border-top-right-radius: 1.4rem;
        border-bottom-right-radius: 1.4rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 style="margin-bottom: 10px;">Dark toggle</h4>
<div class="toggle-btn-dark">
    <div class="toggle-button-wrapper">
        <button class="toggle-button btn-card-mini first toggle-button-selected">
        	-
        </button>
        <button class="btn-card-big toggle-button last">
            +
        </button>
    </div>
</div>

<br>
<h4 style="margin-bottom: 10px;">Light toggle</h4>
<div class="toggle-btn-light">
    <div class="toggle-button-wrapper">
        <button class="toggle-button btn-card-mini toggle-button-selected first" >
            -
        </button>
        <button class="btn-card-big toggle-button last">
            +
        </button>
    </div>
</div>

Answer 1

вы можете изменить селектор на

    $('.toggle-button-wrapper').on('click', function(e) {
      $(this).find('.toggle-button').toggleClass("toggle-button-selected");
    e.preventDefault();
    });

Это в основном предотвращает выбор всех переключаемых кнопок и ограничивает дочерние элементы выбранной оболочки