如何解决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");
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。