反向onClick事件onClick

Question

有誰知道如何將onClick分配給執行一個動作的對象，然後當用戶單擊相同的對象時，動作會顛倒過來？

$('#image').click(function() { 
    $('#foo').css({ 
     'background-color': 'red', 
     'color': 'white', 
     'font-size': '44px' 
    }); 
}); 

因此，單擊#image會將更改添加到#foo或反向更改。

小提琴：http://jsfiddle.net/Sx5yH/804/

有什麼建議？

Answer 1

不要直接內嵌樣式操作，這是不是很靈活的方法。相反，你要切換類，用於保存必要的樣式：

$('#image').click(function() { 
    $('#foo').toggleClass('active'); 
}); 

其中類active這樣定義：

#foo.active { 
    background-color: red; 
    color: white; 
    font-size: 44px; 
} 

演示：http://jsfiddle.net/Sx5yH/812/

Answer 2

具體來說就是你的情況 - 最好是給對象分配一個類。然後你可以使用jQuery的切換功能來添加/刪除樣式。

CSS

#image.selected { 
     background-color: red; 
     color: white; 
     font-size: 44px; 
} 

的JavaScript

$('#image').click(function() { 
    $('#image').toggleClass("selected"); 
}); 

Answer 3

http://jsfiddle.net/gb0udnft/1/

你可以使用布爾值來確定它是否是cl舔了一下，然後用一個三元語句來做任何事情，這取決於它是真的還是假的。

(boolean) ? true : false; 

你也可以使用先天JQuery的切換（）函數

http://jsfiddle.net/gb0udnft/2/

$('#image').toggle(function() { 
    // do whatever 
     } 
     , function() { 
     // do whatever 
}); 

或通過使用CSS類來回.toggleClass（），.addClass（）或.removeClass（）