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

我正在做一个项目，我需要在点击每个按钮时切换一组按钮的图像。我需要的功能如下：

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

当我点击一个按钮时，图像从

向下箭头.png

转到

向上箭头.png

如果一个按钮的图像已切换到

arrow up.png

，则单击另一个按钮会将所有其他按钮图像切换到

arrow down.png

，并将其自己的图像切换到

arrow up.png

另外，如果一个图像已切换到

按钮向上.png

，则单击自身可将其自身图像切换回

按钮向下.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');
})

按钮1

按钮2

$（'.btn'）。单击（函数（）{
$（'.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'）；
})

我真的很感激你能帮我。提前谢谢。

回答

我想在单击按钮时使用.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');
    }
})

---

可以在应用类和属性之前添加一些条件检查

$（'.btn'）。单击（函数（）{
var isPrevActive=$（this）.find（'.btn toggle'）.hasClass（'btn-up'）；
//清除所有
$（'.btn toggle'）.removeClass（'btn-up'）；
$（'.btn-toggle'）.addClass（'btn-down'）；
$（'.btn toggle'）.attr（'src'，'img/img pages/events page/arrow down.png'）；
如果（！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'）；
}
})

也分享你的html/css。