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

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

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

或通过使用.toggleClass（）、. addClass（）或.removeClass（）来回使用CSS类