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

与询问是否（＆＃39; B＆＃39;）总是如此

相同

你必须这样做：

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

编辑：

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

我发现this solution用于将rgb转换为十六进制。

Answer 2

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

.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/

我还为hex到rgb引用了这篇文章： RGB to Hex and Hex to RGB

Answer 3

许多浏览器，当然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

参考文献：

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

如何让td颜色在第二次点击时改变颜色？

4 个答案: