反向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（）