如何在網頁上多次使用由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(); 
    })