时间戳

首页 > 解决方案 > 切换到测试 id 并根据类执行操作

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

问题描述

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

<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;
       }}

它什么也没做，我不明白为什么。

提前谢谢了。

标签： javascript

解决方案

您的代码运行良好；只有一个错误——而不是background-color: 'none'你必须使用background-color: 'transparent'.

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>

推荐阅读