Javascript 如何让td颜色在第二次单击时更改颜色？

下面是我的代码。我正在尝试反转已经发出的单击。这种情况发生在td标签上。我结合了这里的几个问题和其他论坛的失败实验

function changeColor(elem) {
    if (elem.style.backgroundColor = "#5AD9C1" || "transparent") {
        elem.style.backgroundColor = "#66FF66";
    } else if (element.style.backgroundColor = "#66FF66") {
        elem.style.backgroundColor = "#5AD9C1";
    }
};

---

小心=和==

function changeColor(elem) {
  if (elem.style.backgroundColor == "#5AD9C1" || elem.style.backgroundColor == "transparent") {
    elem.style.backgroundColor = "#66FF66";
  } else if (element.style.backgroundColor == "#66FF66") {
    elem.style.backgroundColor = "#5AD9C1";
  }

---

小心=和==

function changeColor(elem) {
  if (elem.style.backgroundColor == "#5AD9C1" || elem.style.backgroundColor == "transparent") {
    elem.style.backgroundColor = "#66FF66";
  } else if (element.style.backgroundColor == "#66FF66") {
    elem.style.backgroundColor = "#5AD9C1";
  }

---

您应该使用一个类，以便可以从样式表维护它

.state2 {
   background-color: #66FF66;
}
.state1{
   background-color: #5AD9C1;
}

其中一个状态可能是冗余的，应该应用于基本元素，从而允许您切换类

如果jQuery可用，请使用以下命令：

if($element.hasClass('state1')) {
   $element.removeClass('state1').addClass('state2');
else{
   $element.removeClass('state2').addClass('state1');
}

以上内容可以改进很多，特别是如果有一些HTML示例的话

如果您没有使用jQuery的特权，您可以寻找替代方案或使用以下替代方案：

编辑： 我添加了一个解决您问题的答案。尽管我仍然不建议这样做：

我还参考了这篇文章中的十六进制到rgb：

---

您应该使用一个类，以便可以从样式表中维护它

.state2 {
   background-color: #66FF66;
}
.state1{
   background-color: #5AD9C1;
}

其中一个状态可能是冗余的，应该应用于基本元素，从而允许您切换类

如果jQuery可用，请使用以下命令：

if($element.hasClass('state1')) {
   $element.removeClass('state1').addClass('state2');
else{
   $element.removeClass('state2').addClass('state1');
}

以上内容可以改进很多，特别是如果有一些HTML示例的话

如果您没有使用jQuery的特权，您可以寻找替代方案或使用以下替代方案：

编辑： 我添加了一个解决您问题的答案。尽管我仍然不建议这样做：

我还参考了这篇文章中的十六进制到rgb： 首先：

第二：

您不能像这样链接if语句：

if(myVar == 'A' || 'B' || 'C')

if(myVar == 'A' || myVar == 'B' || myVAR == 'C')

这就像问“B”是否总是正确一样

你必须这样做：

if(myVar == 'A' || 'B' || 'C')

if(myVar == 'A' || myVar == 'B' || myVAR == 'C')

有关if语句和运算符的详细信息，请参阅

正确的解决方案是：

编辑：

如评论中所述，这不起作用的主要原因是style.backgroundColor将颜色返回为RGB值

我找到了将rgb转换为十六进制的方法。

首先：

第二：

您不能像这样链接if语句：

if(myVar == 'A' || 'B' || 'C')

if(myVar == 'A' || myVar == 'B' || myVAR == 'C')

这就像问“B”是否总是正确一样

你必须这样做：

if(myVar == 'A' || 'B' || 'C')

if(myVar == 'A' || myVar == 'B' || myVAR == 'C')

有关if语句和运算符的详细信息，请参阅

正确的解决方案是：

编辑：

如评论中所述，这不起作用的主要原因是style.backgroundColor将颜色返回为RGB值

---

我找到了将rgb转换为十六进制的方法。

许多浏览器，当然根据经验，Chrome和Firefox会以rgb格式返回颜色，而不是十六进制；无论以何种格式提供，fff、白色、HSL0100%、100%全部

这就是说，如果您使用css类名，那么您就不需要担心在特定颜色之间切换，或者如何补偿特定浏览器返回这些颜色时出现的异常情况。例如，在纯JavaScript中，实现类更改函数非常简单，可以实现相同的最终结果：

function toggleClass(elem, cssClassOn) {
    var test = elem.classList.contains(cssClassOn);
    elem.classList[ test ? 'remove' : 'add' ](cssClassOn);
}

document.getElementById('test').addEventListener('click', function (e) {
    toggleClass(e.target, 'on');
});

当然，上述内容需要与适当的CSS样式相结合

对于那些没有实现Element.classList API的浏览器，一个简单的替代方案是：

function toggleClass(elem, cssClassOn) {
    var currentClasses = elem.className,
        test = currentClasses.indexOf(cssClassOn) > -1;

    if (test) {
        elem.className = currentClasses.replace(cssClassOn,'');
    }
    else {
        elem.className += currentClasses + ' ' + cssClassOn;
    }
}

参考资料：

. . .

---

许多浏览器，当然是Chrome和Firefox，从经验来看，都是以rgb格式返回颜色，而不是十六进制；无论以何种格式提供，fff、白色、HSL0100%、100%全部

这就是说，如果您使用css类名，那么您就不需要担心在特定颜色之间切换，或者如何补偿特定浏览器返回这些颜色时出现的异常情况。例如，在纯JavaScript中，实现类更改函数非常简单，可以实现相同的最终结果：

function toggleClass(elem, cssClassOn) {
    var test = elem.classList.contains(cssClassOn);
    elem.classList[ test ? 'remove' : 'add' ](cssClassOn);
}

document.getElementById('test').addEventListener('click', function (e) {
    toggleClass(e.target, 'on');
});

当然，上述内容需要与适当的CSS样式相结合

对于那些没有实现Element.classList API的浏览器，一个简单的替代方案是：

function toggleClass(elem, cssClassOn) {
    var currentClasses = elem.className,
        test = currentClasses.indexOf(cssClassOn) > -1;

    if (test) {
        elem.className = currentClasses.replace(cssClassOn,'');
    }
    else {
        elem.className += currentClasses + ' ' + cssClassOn;
    }
}

参考资料：

. . .

---

我明白你在说什么，我以前不明白这一点，我查看了提供的链接。同样的问题也出现在等号的差异上。这不起作用的原因是，当你得到backgroundColor时，本机api会返回一个rgb格式的字符串，例如rgb102、100、208，而不是你期望的十六进制。根据我下面的回答，我仍然强烈建议使用类并赋予这些状态一个更有意义的值。我完全忘记了这种行为，因为我现在只使用jQuery：我明白你的意思，我以前不理解，我查看了提供的链接。同样的问题也出现在等号的差异上。这不起作用的原因是当你得到背景颜色时，原生api会在rgb f中返回一个字符串

---

以ormat rgb102、100、208为例，而不是您期望的十六进制格式。根据我下面的回答，我仍然强烈建议使用类并赋予这些状态一个更有意义的值。我完全忘记了这种行为，因为我现在只使用jQuery：