如何在原生JavaScript中为指定CSS类元素映射函数

核心思路 #

jQuery的$('.slider').slider()本质是先获取匹配的元素集合，再遍历每个元素执行初始化逻辑。原生JS中可以通过document.querySelectorAll()获取元素集合，再用forEach()遍历处理。

直接实现方式 #

这是最简洁的写法，直接获取元素并处理：

// 获取所有带.slider类的元素
const sliderElements = document.querySelectorAll('.slider');

// 遍历每个元素执行滑块初始化逻辑
sliderElements.forEach(slider => {
  // 这里替换成你原来在// Do some stuff里的代码
  // 示例：给每个滑块添加初始化标记
  slider.dataset.initialized = 'true';
  console.log('滑块已初始化:', slider);
});

封装成可复用函数 #

如果需要像jQuery那样复用这个滑块逻辑，可以封装成独立函数，支持传入选择器或元素集合：

function initSlider(targets) {
  // 处理传入的选择器字符串
  const elements = typeof targets === 'string' 
    ? document.querySelectorAll(targets) 
    : targets;

  // 遍历处理每个元素
  elements.forEach(el => {
    // 这里写滑块的具体初始化逻辑
    // 比如绑定事件、计算尺寸等
    el.addEventListener('input', function() {
      console.log('滑块值变化:', this.value);
    });
  });
}

// 使用方式：传入选择器
initSlider('.slider');

// 也可以直接传入已获取的元素集合
// const sliders = document.querySelectorAll('.slider');
// initSlider(sliders);

注意事项 #

• querySelectorAll()返回的是NodeList，现代浏览器都支持forEach()方法；如果要兼容旧版浏览器，可以用Array.from()转成数组再遍历：Array.from(sliderElements).forEach(...)
• 原生JS中遍历元素时，直接使用回调参数（比如上面的slider、el）比依赖this更清晰，避免上下文绑定问题

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