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