jQuery Mobile按钮切换ui-body-a与ui-body-b功能异常求助

我帮你搞定这个切换问题！你遇到的核心问题应该是切换样式时没有正确移除旧类，或者事件绑定时机不对，导致状态判断失效。下面是完整的解决方案：

1. 基础HTML结构 #

首先确保你的页面结构符合jQuery Mobile的规范，样式类要加在data-role="page"的容器上（而不是全局body）：

<div data-role="page" id="mainPage" class="ui-body-a">
  <div data-role="header">
    <h1>样式切换Demo</h1>
  </div>
  <div data-role="content">
    <button id="styleToggleBtn">切换到深色</button>
  </div>
</div>

2. 核心JavaScript逻辑 #

使用jQuery Mobile推荐的pagecreate事件初始化绑定，确保DOM元素加载完成后再执行逻辑，同时严格控制样式类的添加/移除：

// 页面初始化完成后绑定事件
$(document).on("pagecreate", "#mainPage", function() {
  // 获取按钮和页面容器元素
  const $toggleBtn = $("#styleToggleBtn");
  const $pageContainer = $("#mainPage");

  $toggleBtn.on("click", function() {
    // 判断当前页面的样式状态
    if ($pageContainer.hasClass("ui-body-b")) {
      // 切回浅色样式
      $pageContainer.removeClass("ui-body-b").addClass("ui-body-a");
      $toggleBtn.text("切换到深色");
    } else {
      // 切换到深色样式
      $pageContainer.removeClass("ui-body-a").addClass("ui-body-b");
      $toggleBtn.text("切换到浅色");
    }
  });
});

3. 关键注意点 #

• 操作正确的容器：jQuery Mobile的页面样式是作用在data-role="page"的容器上，不要直接修改全局<body>的类，否则可能影响其他页面。
• 先删后加样式类：必须先移除旧的样式类（比如ui-body-a），再添加新的（ui-body-b），避免两个类同时存在导致样式优先级冲突。
• 用正确的事件绑定时机：不要用普通的$(document).ready()，jQuery Mobile单页应用推荐用pagecreate事件确保页面DOM完全初始化。
• 同步按钮文本：每次切换样式时要同步更新按钮文本，保证状态和文本一致。

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