Javascript 使用Jquery交换图像和禁用按钮

我用图标创建了6个独立的按钮。每个按钮都有一个活动和非活动状态（两个不同的图像）。当一个按钮处于活动状态时，如何交换图像并禁用任何其他事先处于活动状态的按钮

下面是我用来交换图像的JQuery代码片段

$(".img-swap").on('click', function() {
    if ($(this).attr("class") == "img-swap") {
      this.src = this.src.replace("_btn","_active");
    } else {
      this.src = this.src.replace("_active","_btn");
    }
    $(this).toggleClass("active");
  });
});

下面是我的按钮在HTML/erb中的布局：

<button class="event-btn" disabled>
    <%= link_to image_tag("example_btn.png", class: "img-swap"), "#"  %>
</button>

---

提前非常感谢！我还在学习，这将非常有帮助

首先，您可能不希望按钮中有链接。其次，最好使用CSS规则根据元素状态更改外观。其次，最好使用CSS规则根据元素状态更改外观。