在模态框中根据状态自动高亮显示按钮

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Context</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <!-- 其他表单元素 -->
         <div class="form-group col-md-3">
            <label>Status</label>  
            <!-- Online 按钮 -->
            <input type="button" class="btn btn-outline-success d-block mx-auto my-3" id="Geton" value="Online">
            <!-- Offline 按钮 -->
            <input type="button" class="btn btn-outline-danger d-block mx-auto my-3" id="Getoff" value="Offline">
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="Save" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

/* 通用按钮基础样式（如果需要覆盖Bootstrap默认） */
/* button {
  background-color : #fff;
  padding : 10px;
  border-radius : 10px;
  color : #198754;
  border : 1px solid #198754;
  transition : 0.2s ease;
  cursor:pointer;
} */

/* 定义“Online”状态的激活样式 */
.btn-status-active-online {
    /* 模拟Bootstrap success 状态的 box-shadow */
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); 
    /* 同时，将按钮从 outline 状态变为填充状态，以增强视觉区分 */
    background-color: #198754; /* Bootstrap success color */
    color: #fff;
    border-color: #198754;
}

/* 定义“Offline”状态的激活样式 */
.btn-status-active-offline {
    /* 模拟Bootstrap danger 状态的 box-shadow */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
    /* 将按钮从 outline 状态变为填充状态 */
    background-color: #dc3545; /* Bootstrap danger color */
    color: #fff;
    border-color: #dc3545;
}

/* 确保按钮在非激活状态下保持其原始的 outline 样式 */
/* 如果按钮被激活，我们需要移除这些 outline 样式 */
/* 例如，当 .btn-status-active-online 应用时，移除 btn-outline-success */
/* 这将在JavaScript中处理 */

$(document).ready(function() {
    // 监听模态框完全显示事件
    $('#exampleModal').on('shown.bs.modal', function () {
        const createModal = $(this); // 获取模态框的jQuery对象

        // 假设这是从后端或其他地方获取的当前状态
        // 实际应用中，'stat' 的值会通过数据绑定或AJAX请求获取
        const currentStatus = 'online'; // 示例：模拟当前状态为 'online'

        // 1. 移除所有按钮上可能存在的激活状态和填充样式
        //    并将它们恢复到原始的 outline 样式
        createModal.find('#Geton, #Getoff').each(function() {
            const $btn = $(this);
            $btn.removeClass('btn-status-active-online btn-status-active-offline btn-success btn-danger');
            if ($btn.attr('id') === 'Geton') {
                $btn.addClass('btn-outline-success');
            } else if ($btn.attr('id') === 'Getoff') {
                $btn.addClass('btn-outline-danger');
            }
        });

        // 2. 根据 currentStatus 变量，为相应的按钮添加激活样式
        if (currentStatus === 'online') {
            const $onlineBtn = createModal.find("#Geton");
            $onlineBtn.addClass('btn-status-active-online btn-success'); // 添加自定义高亮和Bootstrap填充样式
            $onlineBtn.removeClass('btn-outline-success'); // 移除原始的 outline 样式
        } else if (currentStatus === 'offline') {
            const $offlineBtn = createModal.find("#Getoff");
            $offlineBtn.addClass('btn-status-active-offline btn-danger'); // 添加自定义高亮和Bootstrap填充样式
            $offlineBtn.removeClass('btn-outline-danger'); // 移除原始的 outline 样式
        }

        // 注意：如果需要用户点击按钮来切换状态并更新高亮，
        // 则需要为按钮添加点击事件监听器，并在事件中执行类似上述的类切换逻辑。
        // 示例：
        // createModal.find('#Geton').on('click', function() {
        //     // 更新 currentStatus 变量，然后再次执行样式更新逻辑
        // });
    });
});