javascript - 单击按钮本身以及其他按钮时更改按钮的图像源属性

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

正在回答

I want to change the source attribute of the image with the .btn-toggle class on clicking the button, so that the button essentially flips to the open position when clicked, and flips back to the closed position when I click either the same button or other buttons in the set.

运行条件检查按钮状态

 $('.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');
    }
})