如何在网页上多次使用由JavaScript生成的类？

Question

我正在用一个临时电子邮件地址读入一个文本文件，并让这个片段构建了一个HTML链接。

<script> 
//<![CDATA[ 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementsByClassName('temporary_email')[0].innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Email</a>"; 
     } 
    }; 
    xhttp.open("GET", "/temporary_email.txt", true); 
    xhttp.send(); 
//]]> 
</script> 

整个事情按预期工作，我可以公正的地方<span class="temporary_email"></span>任何地方获得一个链接。

问题：看来我只能抓取这一次;如果我的身体中有mailto:链接，而另一个链接在我的页脚中，则脚本将不起作用。所以，我认为这实际上不是一个变量，而我作为JS noob是真正的问题。

PS：我试图避免jQuery。尝试了几个虚拟替代方法，如复制脚本并为document.getElementsByClassName指定另一个名称，但没有任何内容。基本上我正在进行一个快速和肮脏的修复，直到我知道足够的JavaScript来正确执行此操作。

Answer 1

原因你只得到追加到类名匹配的第一个实例的JS，就是因为document.getElementsByClassName()返回数组的匹配元素。

通过使用document.getElementsByClassName('temporary_email')[0]，你只会选择第一个匹配的元素。

你需要更新到下面的代码：

var xhttp = new XMLHttpRequest(); 

    xhttp.onreadystatechange = function() { 

      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       var elements = document.getElementsByClassName('temporary_email'); 

       for (var i = 0; i < elements.length; i++) { 
        elements[i].innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Email</a>"; 
       } 
      } 
    }; 
    xhttp.open("GET", "/temporary_email.txt", true); 
    xhttp.send(); 

Here's一个基本的小提琴。

通过这种方式，您可以遍历数组，并且每个数组都可以根据需要更改innerHTML。另外，没有jQuery！

Answer 2

你可以遍历您temporary_email链接和更新它们：

Array.from(document.getElementsByClassName('temporary_email')) 
    .forEach(function(el){ 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     el.innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Emai l</a>"; 
    } 
    }; 
    xhttp.open("GET", "/temporary_email.txt", true); 
    xhttp.send(); 
    })