为带.active类的Bootstrap按钮添加勾选标记的jQuery问题

你当前的代码存在两个核心问题：

1. $('.btn-vert').hasClass('active')是判断整个按钮集合中是否存在含active类的元素，而非逐个检查单个按钮；
2. 代码中的$(this)没有指向当前按钮（全局作用域下this指向window），导致无法精准操作单个按钮。

下面是修正后的实现方案，同时覆盖初始页面加载和按钮切换状态两种场景：

1. 处理初始页面状态 #

页面加载完成后，逐个检查所有.btn-vert按钮，为已激活（含active类）的按钮添加勾选标记：

// 页面加载完成后执行
$(function() {
  $('.btn-vert').each(function() {
    const $currentBtn = $(this);
    // 检查当前按钮是否有active类
    if ($currentBtn.hasClass('active')) {
      $currentBtn.append('<span class="float-end"><i class="fa-solid fa-check"></i></span>');
    }
  });
});

2. 处理按钮切换事件 #

监听Bootstrap按钮的状态切换，动态添加或移除勾选标记：

$(function() {
  $('.btn-vert').on('click', function() {
    const $currentBtn = $(this);
    const $checkElement = $currentBtn.find('.float-end:has(.fa-solid.fa-check)');
    
    // 按钮切换后判断状态
    if ($currentBtn.hasClass('active')) {
      // 若激活且无勾选标记则添加
      if (!$checkElement.length) {
        $currentBtn.append('<span class="float-end"><i class="fa-solid fa-check"></i></span>');
      }
    } else {
      // 若未激活则移除勾选标记
      $checkElement.remove();
    }
  });
});

代码说明 #

• 使用.each()遍历所有目标按钮，确保每个按钮的状态判断和操作都是独立的；
• 监听按钮的click事件（Bootstrap按钮切换会触发此事件并自动切换active类）；
• 通过.find()检查当前按钮是否已存在勾选标记，避免重复添加；
• 状态切换时，根据active类的存在与否，动态添加或移除勾选元素。

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