Изменить атрибут источника изображения для кнопки при нажатии как на себя, так и на другие кнопки

Question

Я работаю над проектом, в котором мне нужно переключать изображения набора кнопок при нажатии на каждую из них. Мне нужна следующая функция:

Изображение переходит от arrow-down.png до arrow-up.png при нажатии одной кнопки.

Если изображение уже переключено на arrow-up.png для одной кнопки, тонажатие другого переключает все остальные изображения кнопок на arrow-down.png и переключает его собственное изображение на arrow-up.png.

Кроме того, если одно изображение уже переключено на button-up.png, нажатие само по себе переключает свое собственное изображение обратно на button-down.png.

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

Меня не устраиваеттретье требование, при котором само нажатие переключает собственное изображение.

Мои html и jquery следующие:

<button class="btn p-0" type="button" data-toggle="collapse" data-target="#btn-1">
    <p class="text_small text-capitalize font-weight-bold">button 1</p>
    <img src="img/img-pages/events-page/arrow-down.png" alt="" class="img-fluid btn-toggle btn-down">
</button>
<button class="btn p-0" type="button" data-toggle="collapse" data-target="#btn-2">
    <p class="text_small text-capitalize font-weight-bold">button 2</p>
    <img src="img/img-pages/events-page/arrow-down.png" alt="" class="img-fluid btn-toggle btn-down">
</button>



$('.btn').click(function () {
    $('.btn-toggle').removeClass('btn-up');
    $('.btn-toggle').addClass('btn-down');
    $('.btn-toggle').attr('src', 'img/img-pages/events-page/arrow-down.png');

    $(this).find('.btn-toggle').removeClass('btn-down');
    $(this).find('.btn-toggle').addClass('btn-up');
    $(this).find('.btn-toggle').attr('src', 'img/img-pages/events-page/arrow-up.png');
})

Буду очень признателен за помощь в этом. Заранее спасибо.

Answer 1

Ответ

Я хочу изменить атрибут источника изображения с помощью класса .btn-toggle при нажатии на кнопку, чтобы при щелчке кнопка по существу переворачивалась в открытое положение и переворачиваласьвернуться в закрытое положение, когда я нажимаю ту же кнопку или другие кнопки в наборе.

Запуск проверки состояния кнопок

 $('.btn').click(function () {
    var button = $(this);
    if(button.hasClass('btn-up')){
        button.removeClass('btn-up')
        .addClass('btn-down')
        .attr('src', 'img/img-pages/events-page/arrow-down.png');
    }else{
        button.removeClass('btn-down')
        .addClass('btn-up')
        .attr('src', 'img/img-pages/events-page/arrow-up.png');
    }
})

Answer 2

Вы можете добавить некоторую условную проверку перед применением классов и атрибутов.

$('.btn').click(function () {
    var isPrevActive = $(this).find('.btn-toggle').hasClass('btn-up');

    // Clear all
    $('.btn-toggle').removeClass('btn-up');
    $('.btn-toggle').addClass('btn-down');
    $('.btn-toggle').attr('src', 'img/img-pages/events-page/arrow-down.png');

    if (!isPrevActive) {
        $(this).find('.btn-toggle').removeClass('btn-down');
        $(this).find('.btn-toggle').addClass('btn-up');
        $(this).find('.btn-toggle').attr('src', 'img/img-pages/events-page/arrow-up.png');
    }
})