jQuery绑定同一class点击事件实现单次仅切换一个元素的类功能

该需求完全可以实现，核心逻辑是在点击当前按钮时，先清空所有同class按钮的选中状态，再单独处理当前点击按钮的状态即可，你只需修改JS部分代码，原有CSS、HTML无需调整：

$(document).ready(function() {
  // 直接给所有带.btn-quote类的元素绑定点击事件，无需依赖父元素事件委托
  $(".btn-quote").on("click", function() {
    const $currentBtn = $(this);
    // 先记录当前按钮是否已经处于选中状态
    const isActive = $currentBtn.hasClass('quote-selected');

    // 第一步：清空所有同class按钮的选中状态，恢复默认文案
    $(".btn-quote").removeClass('quote-selected').text('Select This Quote');

    // 第二步：如果当前按钮之前未选中，就给它设置选中态；如果之前已经选中，保持清空后的未选中状态即可
    if (!isActive) {
      $currentBtn.addClass('quote-selected').text('Selected');
    }
  });
});

如果需要强制必须保留一个选中项，删掉状态判断逻辑，直接在清空所有选中态后给当前按钮加类、改文案即可。

内容的提问来源于stack exchange，提问作者laurence keith albano