Как поменять классы у кнопок в Jquery?

Question

Как сделать так чтобы значения классов (InactiveButton, АctiveButton) у кнопок поменялись местами?

<button id="delButton" class="ActiveButton">Самовывоз</button>
<button id="delButton" class="InactiveButton">Доставка</button>

Сам пытался сделать нечто подобное, но не получилось

$('.InactveButton').click(function (){
    $(this).toggleClass('InactiveButton').toggleClass('ActiveButton');
    $('.ActiveBbutton').toggleClass('InactiveButton').toggleClass('ActiveButton');
});

Answer 1

Необходимо повесить событие на общий селектор данных кнопок (в нашем случае в качестве селектора выступит тег button). При клике на кнопку меняем классы у всех с InactiveButton на ActiveButton. После у текущей кнопки уже меняем классы обратно.

$('button').click(function() {
  $('button').removeClass('ActiveButton').addClass('InactiveButton'); //можно и toggleClass использовать 
 $(this).toggleClass('ActiveButton').toggleClass('InactiveButton')
});

.InactiveButton {
opacity: 0.5;
}
.ActiveButton {
opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="delButton-1" class="ActiveButton">Самовывоз</button>
<button id="delButton-2" class="InactiveButton">Доставка</button>

P.S. И не забываем, что идентификаторы на странице должны быть разными. Повторяющихся быть не должно

Answer 2

Вот ещё одно решение:

<button id="qqq" class="qqq">Самовывоз</button>
<button id="www" class="www ActiveButton">Доставка</button>

 $('#qqq').click(function() {
                            if ($('#qqq').hasClass('ActiveButton') == false)
                            {
                                $( "#qqq" ).addClass( 'ActiveButton' );
                                $( "#www" ).removeClass( 'ActiveButton' );
                            }
                        })

                        $('#www').click(function() {
                            if ($('#www').hasClass('ActiveButton') == false)
                            {
                                $( "#www" ).addClass( 'ActiveButton' );
                                $( "#qqq" ).removeClass( 'ActiveButton' );
                            }
                        })

Answer 3

Не стоит назначать одинаковый id элементам. Возможно в Вашем случае не обязательно менять местами классы. Можно изначально назначить один общий класс для кнопок (аналог inactive), и просто добавлять/удалять класс active, который будет применять необходимый стиль. Пример ниже.

$('.delBtn').click(function (){
    $('.delBtn.active').removeClass('active');
    $(this).addClass('active');    
});

.delBtn {
  opacity: 0.5;
  background: blue;
  color: white;
  padding: 10px;
  cursor: pointer;
  border: none;
}

.delBtn.active {
  opacity: 1;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="delBtn">Самовывоз</button>
<button class="delBtn active">Доставка</button>

БЛОГ НА HUSL

Как поменять классы у кнопок в Jquery?

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