如何在原生JavaScript中为类元素绑定点击事件（无需jQuery）

别担心英语表达的问题，完全没问题的！我来帮你把依赖ID的原生JS动画改成支持类选择的版本，完全不需要jQuery~

核心思路 #

原来的脚本依赖getElementById()获取单个元素，要改成支持类元素，我们需要：

1. 获取页面中所有匹配目标类的元素
2. 遍历这些元素，给每个元素单独应用动画逻辑

示例对比（以淡入动画为例） #

原来的ID版本脚本

// 依赖ID的动画
const targetElement = document.getElementById('animate-me');

function fadeIn() {
  let opacity = 0;
  const timer = setInterval(() => {
    if (opacity >= 1) {
      clearInterval(timer);
    }
    targetElement.style.opacity = opacity;
    opacity += 0.05;
  }, 30);
}

// 触发动画
fadeIn();

改成类选择的原生JS版本

// 支持类元素的动画
function fadeInElement(element) {
  let opacity = 0;
  const timer = setInterval(() => {
    if (opacity >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = opacity;
    opacity += 0.05;
  }, 30);
}

// 获取所有带.animate-me类的元素
const animatedElements = document.querySelectorAll('.animate-me');

// 遍历每个元素，应用动画
animatedElements.forEach(element => {
  fadeInElement(element);
});

关键知识点解释 #

• document.querySelectorAll('.your-class')：返回页面中所有匹配该类的元素（NodeList类型），可以直接用forEach()遍历，非常方便。
• 封装独立的动画函数：把动画逻辑改成接受单个元素作为参数，这样每个类元素都能独立执行动画，不会互相干扰。
• 如果需要在特定事件触发动画（比如点击按钮），只需要把遍历逻辑放到事件监听里即可：

document.getElementById('trigger-btn').addEventListener('click', () => {
  animatedElements.forEach(element => {
    fadeInElement(element);
  });
});

这样就完全实现了jQuery中$('.your-class').animate()类似的效果，而且是纯原生JS，没有任何依赖~

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