按钮图片切换功能求助：自身重复点击切换逻辑实现

我正在开发一个项目，需要实现一组按钮的图片切换功能，具体需求如下：

• 点击按钮时，图片从arrow-down.png切换为arrow-up.png；
• 若已有按钮图片为arrow-up.png，点击其他按钮时，所有其他按钮切回arrow-down.png，当前按钮切为arrow-up.png；
• 若按钮当前为arrow-up.png，点击自身则切回arrow-down.png。

目前前两个需求已实现，但第三个需求卡住了。我的HTML和jQuery代码如下：

HTML代码 #

<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>

原jQuery代码 #

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

希望得到相关帮助，感谢支持。

嘿，你已经完成了大部分功能，问题出在原代码里每次点击都会强制把当前按钮设为向上箭头，完全没考虑它当前的状态～咱们只需要加个状态判断就能搞定第三个需求。

修改后的jQuery代码如下：

$('.btn').click(function () {
  // 先拿到当前点击按钮里的箭头元素
  const $currentArrow = $(this).find('.btn-toggle');
  // 判断这个箭头现在是不是向上的状态
  const isCurrentUp = $currentArrow.hasClass('btn-up');

  // 第一步：把所有其他按钮的箭头都重置为向下
  $('.btn-toggle').not($currentArrow)
    .removeClass('btn-up')
    .addClass('btn-down')
    .attr('src', 'img/img-pages/events-page/arrow-down.png');

  // 第二步：根据当前箭头的状态，决定切换方向
  if (isCurrentUp) {
    // 如果本来是向上，点击后就切回向下
    $currentArrow.removeClass('btn-up')
      .addClass('btn-down')
      .attr('src', 'img/img-pages/events-page/arrow-down.png');
  } else {
    // 如果本来是向下，点击后切换为向上
    $currentArrow.removeClass('btn-down')
      .addClass('btn-up')
      .attr('src', 'img/img-pages/events-page/arrow-up.png');
  }
})

逻辑说明 #

1. 先定位当前点击按钮的箭头元素，用hasClass判断它当前是否是向上状态；
2. 用.not($currentArrow)跳过当前按钮，把其他所有按钮的箭头重置为向下状态，这样既满足了第二个需求，又不用重复修改当前按钮；
3. 最后根据当前按钮的状态做切换：如果本来是向上就切回向下，否则就切为向上，完美实现第三个需求。

你可以把这段代码替换掉原来的试试，应该就能正常工作啦～

内容的提问来源于stack exchange，提问作者jerome