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类

反转onClick事件onClick

3 个答案: