javascript - 切换到测试 id 并根据类执行操作

Question

我的页面上有许多元素，它们的背景颜色可能是粉色、黄色或蓝色。这些元素都带有各自的类，例如蓝色:

<a href="http://somesite.com/person/Arnald_Garnier_MSP-AU" class="change_link_colour doc-person-blue">Arnaldus Garnieri</a>

我有三个按钮用于删除这些各自的背景颜色，

<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour(this.id)">clear all</span>

<span id="clear-doc-place-pink" class="fake_link" onclick="clearentitycolour(this.id)">clear all</span>

<span id="clear-doc-segment-yellow" class="fake_link" onclick="clearentitycolour(this.id)">clear all</span>

这些按钮调用相同的函数，该函数应该读取元素 ID 名称并确定选择哪个类来更新所有 style.backgroundColor = "none"

function clearentitycolour(clicked_id)
   {
       switch(clicked_id) {
       case "clear-doc-person-blue":
       var x = document.getElementsByClassName("doc-person-blue");
       var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "none";}
       break;
       case "clear-doc-place-pink":
       var x = document.getElementsByClassName("doc-place-pink");
       var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "none";}
       break;
       case "clear-doc-segment-yellow":
       var x = document.getElementsByClassName("doc-segment-yellow");
       var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "none";}
       break;
       }}

它没有做任何事情，我不明白为什么。

提前非常感谢。

Answer 1

您的代码工作正常；只有一个错误 - 您必须使用 background-color: 'transparent' 而不是 background-color: 'none'。

function clearentitycolour(clicked_id)
   {
     console.log(clicked_id)
       switch(clicked_id) {
       case "clear-doc-person-blue":
       var x = document.getElementsByClassName("doc-person-blue");
           
       var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "transparent";}
       break;
       case "clear-doc-place-pink":
       var x = document.getElementsByClassName("doc-place-pink");
       var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "transparent";}
       break;
       case "clear-doc-segment-yellow":
       var x = document.getElementsByClassName("doc-segment-yellow");
       var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "transparent";}
       break;
       }}

.doc-person-blue {
  background-color: lightblue;
}

<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour(this.id)">clear blue</span>

<a href="http://somesite.com/person/Arnald_Garnier_MSP-AU" class="change_link_colour doc-person-blue">Arnaldus Garnieri</a>