JS：如何更改同一类的多个Elements的样式

问题描述

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

我的JS更改一个按钮：

case class Source(value: Option[String],date: String,isUpdate: Boolean)

case class Cleaned(value: String,date: String)
case class Logged(value: String,date: String)
case class Updated(value: String,date: String)

val sources: List[Source] = List(
    Source(Option.empty[String],"2020-01-09",false),// 1
    Source(Option.empty[String],true),// 2
    Source(Option("Some Data"),// 3
    Source(Option("Some Data 2"),true) // 4
)


val target = sources.foldLeft(List.empty[Updated],List.empty[Logged],List.empty[Cleaned]){
    case ((updated,logged,cleaned),el) if el.isUpdate =>
        (updated  :+ Updated(el.value.getorElse(""),el.date),logged :+ Logged(el.value.getorElse(""),el.value.fold(cleaned)(d => cleaned :+ Cleaned(d,el.date))
        )

    case ((updated,el) =>
        (updated,el.date))
        )
}

我无法解决此问题的尝试：

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

非常感谢您的帮助。

解决方法

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

javascript jquery-selectors