如何选择几个CSS类并应用Javascript逻辑

Question

在一个网站上，我有几个按钮要求演示。每个按钮都是指向同一链接(mailto方向(的锚点标记。电子邮件方向的更改取决于您选择的国家/地区。所以我做了这个逻辑：

function changeEmailAdress(){
if(window.location.href.indexOf("#ar") != -1){
document.querySelector(".mailToRef").href="mailto:[e-mail]";
}else if(window.location.href.indexOf("#br") != -1){
document.querySelector(".mailToRef").href="mailto:[e-mail]";
}else if(window.location.href.indexOf("#us") != -1){
document.querySelector(".mailToRef").href="mailto:[e-mail]";
}else{
document.querySelector(".mailToRef").href="mailto:[e-mail]";
}
}

这是html:

<a id="mailto" href="" target="_blank" class="cta cta--accent mailToRef">Solicitar Demo</a>
<a href="" class="c-navigation__item mailToRef">Contacto</a>
<a href="" target="_blank" class="cta cta--lg mailToRef" data-solicitude="demo" ">Accedé a una Demo</a>

只有当我有一个带有"；mailto"；班然后，当我将类添加到其他链接时，它不起作用。

我试着用"；querySelectorAll；但它也不起作用。我怎样才能让它工作？我想我错过了什么，但我不知道是什么。

提前谢谢。

Answer 1

您应该使用document.querySelectorAll

document.querySelectorAll(".mailToRef").forEach((el)=>{
el.href="mailto:[e-mail]";
});

它返回一个数组，所以应该使用forEach循环遍历它

Answer 2

您需要选择mailToRef类的所有元素，并根据它们的索引分配各个锚点。

let anchors = document.querySelectorAll(".mailToRef");
function changeEmailAdress(){
if(window.location.href.indexOf("#ar") != -1){
anchors[0].href="mailto:[e-mail]";
}else if(window.location.href.indexOf("#br") != -1){
anchors[1].href="mailto:[e-mail]";
}else if(window.location.href.indexOf("#us") != -1){
anchors[2].href="mailto:[e-mail]";
}else{
anchors[3].href="mailto:[e-mail]";
}
}