Как совместить таргеты в jQuery для добавления классов? Помогите сделать переключатель!

Question

Помогите сделать так, что бы при клике на .setting-box-right два разных класса .setting-circle-btn-active, .setting-long-btn-active добавлялись двум разным элементам .setting-box-right-circle-btn, .setting-box-right-long-btn одновременно. И при повторном нажатии, удалялись. Хочу что бы один из переключателей работал отдельно от других. (то есть скорее всего надо использовать target но я не понимаю как)

$(".setting-box-right-circle-btn").on('click', function(eve){
    $(eve.target).toggleClass('setting-circle-btn-active');
});
$(".setting-box-right-long-btn").on('click', function(evu){
    $(evu.target).toggleClass('setting-long-btn-active');
});

.setting-box-right {
    width: 36px;
    height: 18px;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    position: relative;
    cursor: pointer;
}

.setting-box-right-long-btn {
    background-color: rgb(207 207 207);
    border-radius: 9px;
    height: 18px;
    position: absolute;
    transition: background-color linear 90ms;
    width: 36px;
    z-index: 2;
}

.setting-long-btn-active {
    background-color: #c300e6;
}

.setting-box-right-circle-btn {
    width: 18px;
    height: 18px;
    z-index: 3;
    border-radius: 50%;
    display: block;
    position: relative;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 70%);
    background-color: var(--plusx-bg-color);
    transition: transform ease-in 90ms, background-color ease-in 90ms;
}

.setting-circle-btn-active {
    /*Перемещение вправо при клике*/
    transform: translate3d(18px, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="setting-box-right">
    <span class="setting-box-right-circle-btn"></span>
    <span class="setting-box-right-long-btn"></span>
</div>

Answer 1

let buttons = $(".setting-box-right-circle-btn,.setting-box-right-long-btn");
buttons.on('click', function(eve){
    $(".setting-box-right-circle-btn").toggleClass('setting-circle-btn-active');
    $(".setting-box-right-long-btn").toggleClass('setting-long-btn-active');
});

Answer 2

Подробнее в комментариях к коду.

$(".setting-box-right-circle-btn").on('click', function(){ // При нажатии на кружок
    $(this) // Берём нажатый кружок
      .toggleClass('setting-circle-btn-active') // Добавляем класс или удаляем если он есть
      .next('.setting-box-right-long-btn') // Перемещаемся к следующему блоку `.setting-box-right-long-btn`
      .toggleClass('setting-long-btn-active'); // Добавляем или удаляем класс
});

.setting-box-right {
    width: 36px;
    height: 18px;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    position: relative;
    cursor: pointer;
}

.setting-box-right-long-btn {
    background-color: rgb(207 207 207);
    border-radius: 9px;
    height: 18px;
    position: absolute;
    transition: background-color linear 90ms;
    width: 36px;
    z-index: 2;
}

.setting-long-btn-active {
    background-color: #c300e6;
}

.setting-box-right-circle-btn {
    width: 18px;
    height: 18px;
    z-index: 3;
    border-radius: 50%;
    display: block;
    position: relative;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 70%);
    background-color: var(--plusx-bg-color);
    transition: transform ease-in 90ms, background-color ease-in 90ms;
}

.setting-circle-btn-active {
    /*Перемещение вправо при клике*/
    transform: translate3d(18px, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="setting-box-right">
    <span class="setting-box-right-circle-btn"></span>
    <span class="setting-box-right-long-btn"></span>
</div>

А вообще я бы сделал так

$(".setting-box-right-circle-btn").on('click', function(){ // При нажатии на кружок
    $(this) // Обращаемся к нажатому кружку
      .parent() // получаем его родителя
      .toggleClass('setting-box-right-active'); // Вешаем или удаляем класс
});

.setting-box-right {
    width: 36px;
    height: 18px;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    position: relative;
    cursor: pointer;
}

.setting-box-right-long-btn {
    background-color: rgb(207 207 207);
    border-radius: 9px;
    height: 18px;
    position: absolute;
    transition: background-color linear 90ms;
    width: 36px;
    z-index: 2;
}

.setting-box-right-circle-btn {
    width: 18px;
    height: 18px;
    z-index: 3;
    border-radius: 50%;
    display: block;
    position: relative;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 70%);
    background-color: var(--plusx-bg-color);
    transition: transform ease-in 90ms, background-color ease-in 90ms;
}

.setting-box-right-active .setting-box-right-circle-btn {
    /*Перемещение вправо при клике*/
    transform: translate3d(18px, 0, 0);
}

.setting-box-right-active .setting-box-right-long-btn {
    background-color: #c300e6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="setting-box-right">
    <span class="setting-box-right-circle-btn"></span>
    <span class="setting-box-right-long-btn"></span>
</div>

На клик по всему блоку

$(".setting-box-right").on('click', function(){
  $(this).toggleClass('setting-box-right-active');
});

.setting-box-right {
    width: 36px;
    height: 18px;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    position: relative;
    cursor: pointer;
}

.setting-box-right-long-btn {
    background-color: rgb(207 207 207);
    border-radius: 9px;
    height: 18px;
    position: absolute;
    transition: background-color linear 90ms;
    width: 36px;
    z-index: 2;
}

.setting-box-right-circle-btn {
    width: 18px;
    height: 18px;
    z-index: 3;
    border-radius: 50%;
    display: block;
    position: relative;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 70%);
    background-color: var(--plusx-bg-color);
    transition: transform ease-in 90ms, background-color ease-in 90ms;
}

.setting-box-right-active .setting-box-right-circle-btn {
    /*Перемещение вправо при клике*/
    transform: translate3d(18px, 0, 0);
}

.setting-box-right-active .setting-box-right-long-btn {
    background-color: #c300e6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="setting-box-right">
    <span class="setting-box-right-circle-btn"></span>
    <span class="setting-box-right-long-btn"></span>
</div>

БЛОГ НА HUSL

Как совместить таргеты в jQuery для добавления классов? Помогите сделать переключатель!

Ответы (2 шт):