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: '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>

Answer 2

点击时，您只需传递 this 然后切换 id

无不是有效值，您需要使用 transparent

x[i].style["background-color"] = "transparent";

function clearentitycolour(clicked_id)
   {
   
   
       switch(clicked_id.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["background-color"] = "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["background-color"] = "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["background-color"] = "transparent";}
       break;
       }}

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

<a href="http://somesite.com/person/Arnald_Garnier_MSP-AU" class="change_link_colour doc-person-blue">Arnaldus Garnieri</a>
I have three buttons for removing each of these respective background colours,

<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour(this)">clear all</span>

<span id="clear-doc-place-pink" class="fake_link" onclick="clearentitycolour(this)">clear all</span>

<span id="clear-doc-segment-yellow" class="fake_link" onclick="clearentitycolour(this)">clear all</span>
The buttons call to the same function, which should read the element id name and determine which class to select for updating all style.backgroundColor = "none"

Answer 3

仅查看代码，在此实例中实际上就没有必要使用switch语句。也许可以对此进行修剪。

function clearentitycolour(classToClear)
{
    console.log(classToClear);
    var x = document.getElementsByClassName(classToClear);      

    for (var i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "transparent";
    }
}

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

<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour('doc-person-blue')">clear all</span>

<span id="clear-doc-place-pink" class="fake_link" onclick="clearentitycolour('doc-place-pink')">clear all</span>

<span id="clear-doc-segment-yellow" class="fake_link" onclick="clearentitycolour('doc-segment-yellow')">clear all</span>

<a href="http://somesite.com/person/Arnald_Garnier_MSP-AU" class="change_link_colour doc-person-blue">Arnaldus Garnieri</a>

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

3 个答案: