点击按钮切换HTML根类名问题：重复点击需保留对应data属性值

你的核心问题是JS逻辑错误：当前代码是基于根元素已有的类做互切操作，完全没用到点击按钮的accentValue，所以重复点击同一个按钮时，会触发类的切换，而不是固定设置为当前按钮对应的值。

修正后的代码 #

HTML（无需修改）

<button class='ipsButton accentSwitcher' data-accent-switcher="blue">Button A</button>
<button class='ipsButton accentSwitcher' data-accent-switcher="yellow">Button B</button>

JavaScript（核心逻辑调整）

$(document).ready(function() {
  $('.accentSwitcher').on("click", function() {
    var accentValue = $(this).data('accent-switcher');
    // 移除所有已存在的accent类
    document.documentElement.classList.remove('accent-blue', 'accent-yellow');
    // 添加当前按钮对应的accent类
    document.documentElement.classList.add(`accent-${accentValue}`);
    // 设置cookie
    ips.utils.cookie.set('ipsTheme_type', accentValue, true);
  });
});

逻辑说明 #

1. 每次点击按钮时，先获取当前按钮的data-accent-switcher值
2. 一次性移除根元素上所有可能的主题类（accent-blue、accent-yellow）
3. 添加当前按钮对应的主题类（accent-${accentValue}）
4. 最后设置对应的cookie

这样无论重复点击多少次同一个按钮，都会将根元素类名固定设置为当前按钮对应的取值，完全符合你的需求。

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