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

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

在一个网站上，我有几个按钮要求演示。 每个按钮都是一个锚标记，指向同一链接，即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”类的锚标记时，JavaScript代码才能完美运行。然后，当我将类添加到其他链接时，它不起作用。

我尝试使用“ querySelectorAll”，但是它也不起作用。 我该如何运作？我想我缺少了一些东西，但是我无法弄清楚它是什么。

谢谢。

解决方法

您应该使用document.querySelectorAll

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

它返回一个数组，因此您应该使用forEach遍历它。

,

您需要选择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]";
    }
}