如何獲得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()。