Переключатели на JS

102

19 апреля 2021, 09:20

$('.btn-payment__type').click(function() { 
  $(this).addClass('btn-payment__type--active').siblings().removeClass('btn-payment--active'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="btn-payment__type btn-payment__type--active">MasterCard</button> 
<button class="btn-payment__type">MasterCard</button> 
<button class="btn-payment__type">MasterCard</button>

Есть следующий код, по идее при клике на баттон должен добавляться класс btn-payment__type--active и убираться у другого, но происходит совсем иначе, класс добавляется, но не убирается с соседнего. Почему так?

Answer 1

Потому что Вы пытаетесь убрать класс btn-payment--active, а добавляете btn-payment__type--active. Синтаксическая ошибка

Answer 2

Решение на чистом js

let btn = document.querySelectorAll('.btn-payment__type'); 
 
[...btn].forEach(element => { 
  element.addEventListener('click', evt => { 
    evt.preventDefault; 
    let current = document.querySelector('.btn-payment__type--active'); 
    current.classList.remove('btn-payment__type--active') 
    element.classList.add('btn-payment__type--active') 
  }) 
})

.btn-payment__type--active { 
  color: red; 
}

<button class="btn-payment__type btn-payment__type--active">MasterCard</button>  
<button class="btn-payment__type">MasterCard</button>  
<button class="btn-payment__type">MasterCard</button>