Как взаимодействовать с background button?

Question

Имеется группа кнопок. Нужно, чтобы по нажатию на кнопку цвет кнопки менялся и оставался таким до того момента, пока пользователь не нажмёт на другую кнопку.

Сейчас я попробовал это сделать с помощью mousedown и mouseup, но это это не помогло. Цвет кнопки меняется на пару секунд и возвращается в прежнее состояние.

$(function() {
    $('.btn').on('mousedown', function() {
        $(this).addClass('down');
    });
    $('.btn').on('mouseup', function() {
        $(this).removeClass('down');
    });
});

.down {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
выберите что-то одно
<div class="btns">
  <button class="btn">Тест1</button>
  <button class="btn">тест 2</button>
  <button class="btn">тест 3</button>
  <button class="btn">тест 4</button>
</div>

Answer 1

$(function() {
  $('.btns .btn').on('click', function() {
    $(this).closest('.btns').find('.btn.down').removeClass('down');
    $(this).addClass('down');
  });
});

.down {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
выберите что-то одно
<div class="btns">
  <button class="btn">Тест1</button>
  <button class="btn">тест 2</button>
  <button class="btn">тест 3</button>
  <button class="btn">тест 4</button>
</div>

Answer 2

Надо удалять класс у всех кнопок, а у нажатой добавлять класс. Вот и всё.

Событие достаточно делать по клику.

$(function() {
    $('.btn').on('click', function() {
        $('.btn').removeClass('down');
        $(this).addClass('down');
    });    
});

.down {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
выберите что-то одно
<div class="btns">
  <button class="btn">Тест1</button>
  <button class="btn">тест 2</button>
  <button class="btn">тест 3</button>
  <button class="btn">тест 4</button>
</div>

БЛОГ НА HUSL

Как взаимодействовать с background button?

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