javascript - 反转 onClick 事件 onClick

Question

有谁知道如何将 onClick 分配给执行一个操作的对象，然后当用户点击同一对象时，该操作被反转？

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

因此，点击#image 会将更改添加到#foo 或撤消更改。

fiddle :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/