JS：如何改变多个元素的样式相同class

Question

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

我的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 通过该选择器获取整个元素列表 (class)。

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");
  });
});

JS：如何改变多个元素的样式相同class

JS: How to change the style of multiple Elements with the same class

javascript

jquery-selectors

例子