HTML+jQuery明暗模式切换器中addEventListener失效问题求助

问题分析 #

你的代码存在几个关键问题导致切换失效：

• ID大小写不匹配：HTML中复选框的ID是checkBox（大写B），但JS中用了小写的checkbox获取元素，事件监听器根本没绑定到正确元素上。
• 元素选择不一致：初始化时给#main切换类，却给body添加/移除dark类，后续判断复选框状态又用main标签选择器，逻辑混乱。
• 状态初始化错误：复选框选中状态的判断依据错误，应该对应body的dark类，而非main。

修正后的代码 #

HTML（无需修改）

<label class="switch">
  <input type="checkbox" id="checkBox" />
  <span class="slider"></span>
</label>

JS（jQuery）

$(document).ready(function () {
  // 页面加载时根据本地存储初始化状态
  const isDark = localStorage.toggled === "dark";
  $("body").toggleClass("dark", isDark);
  $("#checkBox").prop("checked", isDark);

  // 绑定复选框点击事件
  $("#checkBox").on("click", function () {
    const isChecked = $(this).is(":checked");
    $("body").toggleClass("dark", isChecked);
    localStorage.toggled = isChecked ? "dark" : "";
  });
});

关键修复点 #

1. 统一ID大小写：用#checkBox正确获取复选框元素。
2. 统一操作对象：始终针对body添加/移除dark类，避免元素混淆。
3. 简化逻辑：使用toggleClass的第二个参数直接控制类的添加/移除，配合复选框的选中状态同步本地存储。
4. 正确初始化：页面加载时根据本地存储直接设置body的类和复选框的选中状态，逻辑更清晰。

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