如何获得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

小心=和==

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

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/

我也引用这篇文章为十六进制RGB： RGB to Hex and Hex to RGB

Answer 3

第一：

// 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(myVar == 'A' || 'B' || 'C') 

这是一样的询问（“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"; 
    } 
} 

编辑：

正如在评论中提到的，最主要的原因，这是行不通是因为风格。backgroundColor返回的颜色为RGB值

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

Answer 4

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