反向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/

您可以使用布尔值来确定它是否已被单击，然后使用三元语句执行任何操作，这取决于它是真还是假。

(boolean) ? true : false;

您还可以使用先天的JQuery切换()函数

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

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

或者使用.toggleClass()、.addClass()或.removeClass()来回使用css类。