getElementById的替代方法 - 如何影響多個元素

Question

我試圖突出顯示段落中的所有單詞，並在單擊時保持它們爲紅色。現在我得到了它的一個字，但其他人不會遵循。 https://jsfiddle.net/q1z7Lnv0/

<p><span id="word" class="notclicked">test</span> <span id="word" class="notclicked">test</span></p> 

的Javascript：

var word = document.getElementById("word"); 
    word.onclick = function() { 
     if(word.className == "clicked"){ 
      word.className = 'notclicked'; 
     } 
     if(word.className == "onmouse"){ 
      word.className = 'clicked'; 
     } 
    } 
    word.onmouseover = function onMouse(){ 
     if(word.className != "clicked"){ 
     word.className = 'onmouse'; 
     } 
    } 
    word.onmouseout = function onMouse(){ 
     if(word.className != "clicked"){ 
     word.className = 'notclicked'; 
     } 
    } 

我知道的問題是，只能有一個ID名稱相同。但我不知道還有什麼其他的選擇可以使用。

請幫忙！

Answer 1

使用此：

document.getElementsByClassName('word'); 

而在你的HTML：

<span class='word'>text</span> 

這樣你會得到所有具有類名「字」的元素，你可以綁定事件該類而不是元素。

你必須修改代碼，以獲得有針對性的詞，只能從一個字的所有與類「字」

例如單詞添加和/或刪除您的點擊類來代替：

word.onclick = function(e) { 
    if(e.target.className == "clicked"){ 
      e.target.className = 'notclicked'; 
    }if(e.target.className == "onmouse"){ 
     e.target.className = 'clicked'; 
    } 
} 

我不是100％確定您可以使用Event接口修改目標的類名，所以將此示例作爲僞代碼而不是複製粘貼代碼。

如果您不熟悉將「e」作爲參數放入您的函數中，則它是所有JavaScript事件的Event接口。它總是傳遞給事件函數，並且可以使用它來獲取有關事件的所有必要信息。

Answer 2

您可以使用class代替id作爲替代別名。

Answer 3

有多種方法可以做到這一點。一種方法可能是將一個類而不是id添加到您想要訪問的元素。然後你可以使用getElementsByClassName。

這裏是一個工作示例： https://jsfiddle.net/q1z7Lnv0/1/