Question

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

我有两组“ A ”标签，第一组带有“我”ID，第二组带有“他们”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>

通过单独的ID组更改背景

1 个答案: