0

Добрый день. Не получается реализовать переключение кнопок. У меня есть две кнопки. При нажатии на верхнюю ей должен добавлять класс .active, при нажатии на нижнюю к нижней добавляться класс .active, с верхней убираться.

Код html:

<div class="sorting-order">
 <div class="icon-play3 sort-parameter">
 </div>
 <div class="icon-play3 sort-parameter">
 </div>
</div>

js:

$('.sort-parameter').click( function() {
 $(".sort-parameter").toggleClass("active");
});

введите сюда описание изображения

2 ответа 2

3

При нажатии на кнопку нужно сначала удалить класс .active у всех кнопок, а потом добавлять его нажимаемой кнопке:

$('.sort-parameter').click(function() {
  $('.sort-parameter').removeClass('active');
  $(this).addClass('active')
});
.sort-parameter {
  width: 200px;
  height: 40px;
  background: #ccc;
}

.sort-parameter.active {
  background: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sorting-order">
  <div class="icon-play3 sort-parameter">
  </div>
  <div class="icon-play3 sort-parameter">
  </div>
</div>

2
  • Спасибо большое!
    – Kate
    11 авг 2017 в 14:32
  • @Kate пожалуйста:)
    – Cheg
    11 авг 2017 в 14:35
1

Вы забили использовать $(this) - применять именно к тому элементу, на котором было собитие. + в начале надо удалить класс active у всех кнопок(если их вдруг будет много) тогда подойдет $('.sort-parameter') - уберет актив со всех кнопок. В вашем случае получалось, что вы добавляли класс всем элементам которых нашел jquery с классом sort-parameter, а надо на кликнутом - $(this).

$('.sort-parameter').click( function() {
  $('.sort-parameter').removeClass("active");
  $(this).toggleClass("active");
});
.active{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sorting-order">
 <div class="icon-play3 sort-parameter">
    test-up
 </div>
 <div class="icon-play3 sort-parameter">
    test-down
 </div>
</div>

1
  • Спасибо большое!
    – Kate
    11 авг 2017 в 14:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.