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

Question

下面是我的代码。我试图扭转已经做出的点击。这发生在 td 标签上。我在这里和其他论坛的几个问题中结合了失败的实验。

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

Answer 1

第一：

// With '=' you do assign a value to backgroundColor
if (elem.style.backgroundColor = "#5AD9C1" ...)

// Use '==' to check, if a equals b
if(elem.style.backgroundColor == "#5AD9C1" ...)

第二：

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

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

这与询问 if('B') 始终为真是一样的

你必须这样做：

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

有关 if 语句和运算符的详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

正确的解决方法是：

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

编辑：

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

我找到了this solution 用于将 rgb 转换为 hex。

Answer 2

许多浏览器，当然是 Chrome 和 Firefox（根据经验）以rgb() 格式返回它们的颜色，而不是十六进制；无论以何种格式提供它们（#fff、white、hsl(0,100%,100%) 所有return rgb(255,255,255)）。

也就是说，如果您使用 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');
});

JS Fiddle demo.

当然，上述内容需要与适当的 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;
    }
}

JS Fiddle demo.

参考资料：

• Element.classList。
• Element.className。
• EventTarget.addEventListener()。

Answer 3

您应该使用一个类，以便可以通过样式表对其进行维护。

.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 的奢侈，你可以看看替代品或使用以下替代品： http://toddmotto.com/creating-jquery-style-functions-in-javascript-hasclass-addclass-removeclass-toggleclass/

编辑： 我添加了一个可以解决您的问题的答案。虽然我仍然不建议这样做： http://jsfiddle.net/po16f5ec/4/

我还参考了这篇文章以获取 rgb 的 hex： RGB to Hex and Hex to RGB

Answer 4

小心 = 和 ==

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