如何用jQuery实现点击按钮循环切换三组元素样式类

我完全懂你的困扰——之前找的方案要么是两类样式切换，要么是点击元素本身触发切换，都没法适配你要的「点击外部按钮，让目标元素在默认、浅橙、中橙三组样式间循环」的需求。那咱们直接来搞定这个问题！

首先明确咱们要切换的三个状态：

• 默认状态：无额外自定义样式类，使用元素本身的背景/文本色
• 浅橙色状态：同时添加LightOrange（背景类） + LightOrange-text（文本类）
• 中橙色状态：同时添加MediumOrange（背景类） + MediumOrange-text（文本类）

具体实现代码 #

假设你的目标元素是某个指定容器（你可以把选择器换成自己项目里的实际元素），给.smallbutton按钮绑定点击事件即可：

// 获取触发按钮和需要切换样式的目标元素
const toggleBtn = document.querySelector('.smallbutton');
const targetElement = document.querySelector('.your-target-element'); // 替换成你的目标元素选择器

// 按循环顺序定义三组样式类，第一组空数组代表默认状态
const styleGroups = [
  [],
  ['LightOrange', 'LightOrange-text'],
  ['MediumOrange', 'MediumOrange-text']
];

// 初始化当前状态的索引，默认从0（无额外样式）开始
let currentStateIndex = 0;

// 绑定点击切换逻辑
toggleBtn.addEventListener('click', () => {
  // 先移除当前状态的所有样式类
  styleGroups[currentStateIndex].forEach(className => {
    targetElement.classList.remove(className);
  });

  // 计算下一个状态的索引，用取模运算实现循环
  currentStateIndex = (currentStateIndex + 1) % styleGroups.length;

  // 添加新状态的所有样式类
  styleGroups[currentStateIndex].forEach(className => {
    targetElement.classList.add(className);
  });
});

代码逻辑说明 #

1. styleGroups数组按循环顺序存储了三组样式类，空数组对应默认无额外样式的状态
2. 每次点击按钮时，先清除当前状态的所有样式类，再通过取模运算计算下一个状态的索引（达到最后一个状态后自动回到初始状态）
3. 最后给目标元素添加上新状态的所有样式类，完成切换

你只需要把your-target-element替换成项目里实际需要切换样式的元素选择器（比如document.body或者某个特定的div类名），就能实现点击按钮时在三组样式间无限循环切换了！

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