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

有多种方法可以做到这一点。一种方法可能是为要访问的元素添加一个类而不是id。然后，您可以使用getElementsByClassName获取它们。

这是一个工作示例： https://jsfiddle.net/q1z7Lnv0/1/

Answer 2

您可以使用class代替id作为替代别名。

getElementById的替代方法 - 如何影响多个元素

2 个答案: