如何用单个JavaScript函数实现多元素样式切换并简化代码？

问题背景 #

原本为多个不同元素编写了5个功能重复的样式切换函数，希望通过querySelectorAll将其简化为单个函数。尝试参考手风琴函数的写法修改，但得到的方案复杂且无效。现有代码包括：存在问题的toggleSnp函数、可参考的手风琴实现函数，以及最初针对单个元素的toggleFive函数。

当前代码问题分析 #

你提供的toggleSnp函数存在几个关键问题：

• document.querySelectorAll('.snp')返回的是NodeList集合，不能直接调用addEventListener，需要遍历每个元素绑定事件
• 判断transform.scale的方式错误，style.transform是字符串，无法直接访问scale属性
• 直接调用toggleSnp()时，this指向的是全局对象而非DOM元素，无法正确操作类名

简化后的实现方案 #

结合手风琴函数的事件绑定逻辑和toggleFive的样式处理逻辑，我们可以写出一个简洁通用的单函数解决方案：

// 初始化所有.snp元素的点击事件
function initSnpToggles() {
  // 获取所有带.snp类的元素
  const snpElements = document.querySelectorAll('.snp');
  
  // 遍历每个元素绑定点击事件
  snpElements.forEach(element => {
    element.addEventListener('click', toggleSnpStyle);
  });
}

// 单个元素的样式切换逻辑
function toggleSnpStyle() {
  // 切换active类
  this.classList.toggle('active');
  
  // 获取当前元素的内联transform样式
  const currentTransform = this.style.transform;
  
  if (currentTransform.includes('scale(3)')) {
    // 恢复初始样式
    this.style.transform = '';
    this.style.position = '';
    this.style.top = '';
    this.style.margin = '';
    this.style.zIndex = '';
  } else {
    // 应用放大样式
    this.style.transform = 'scale(3)';
    this.style.zIndex = '9';
  }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initSnpToggles);

方案说明 #

• 使用querySelectorAll获取所有目标元素，通过forEach遍历绑定点击事件，彻底消除重复代码
• 将事件绑定和样式切换逻辑拆分，代码结构更清晰、易维护
• 使用includes判断transform字符串中是否包含scale(3)，比直接全等判断更健壮（避免浏览器自动格式化样式字符串的问题）
• 利用DOMContentLoaded确保DOM元素加载完成后再初始化事件，避免出现找不到元素的错误

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