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

Question

我正在使用图标创建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>

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