JS：如何改变同一个类的多个元素的样式

Question

我创建了以下代码行来为蓝色按钮的渐变设置动画 (https://konzerthofner.webflow.io/events/2-11-im-11-der-auftakt-2020)。一切都按预期工作，直到我决定使用多个此类按钮。在这种情况下，只有第一个按钮会被动画化。我认为问题是，我总是选择 DOM 中的第一个元素和相应的类。不幸的是，我无法为此提供有效的解决方案。

我的JS改一键：

var cta = document.querySelector('.khctaglobal');
cta.addEventListener("mousemove", (e) => {
  console.log("mousemove success");
    let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  cta.style.setProperty('--x', x + "px");
});

我解决这个问题的尝试失败了：

var cta = document.querySelector('.khctaglobal');
cta.addEventListener("mousemove", (e) => {
  console.log("mousemove success");
    let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  cta.forEach(el => el.style.setProperty('--x', x + "px"));
});

非常感谢您的帮助。

Answer 1

使用querySelectorAll 通过该选择器（类）获取整个元素列表。

document.querySelectorAll('.khctaglobal').forEach(cta => ...);

您可以方便地调用NodeList.prototype.forEach 来遍历选定的元素。

示例

document.querySelectorAll('.khctaglobal').forEach(cta => {
  cta.addEventListener("mousemove", (e) => {
    console.log("mousemove success");
    let rect = e.target.getBoundingClientRect();
    let x = e.clientX - rect.left;
    cta.style.setProperty('--x', x + "px");
  });
});