javascript - 通过单独的 ID 组更改背景

Question

我需要一些帮助来做点小事...

我有两组“ A ”标签，第一组带有“ me ”ID，第二组带有“ them ”ID。当我单击“我”或“他们”组之一时，单击对象的背景会发生变化：

<a id="me" onclick="me();">text</a>
<a id="me" onclick="me();">text</a>
<a id="me" onclick="me();">text</a>

<a id="them" onclick="them();">text</a>
<a id="them" onclick="them();">text</a>
<a id="them" onclick="them();">text</a>
<script>
    function me(){
        document.getElementById('me').style.backgroundColor='#000000';
    }
    function them(){
        document.getElementById('them').style.backgroundColor='#000000';
    }
</script>

我无法更改单击A的背景并独立于 ID 对象恢复上次单击的 A ...

我该怎么做？

Answer 1

给定 ID 的元素不能超过一个。

在你的情况下，你应该使用一个类。例如 ：

<a class="me" onclick="similar();">text</a>
<a class="me" onclick="similar();">text</a>
<a class="me" onclick="similar();">text</a>
<a class="them" onclick="similar();">text</a>
<a class="them" onclick="similar();">text</a>
<a class="them" onclick="similar();">text</a>
<script>
  function similar(){
     var elems = document.getElementsByClassName(this.className);
     for (var i=0; i<elems.length; i++) elems[i].style.backgroundColor='#000000';
  }
</script>