1

我正在快速做一个 jsFiddle 来了解更多关于 jQuery API 的信息，但一个小提琴没有按我预期的方式工作。

jsfiddle：http: //jsfiddle.net/7j5Fc/

HTML：

<div></div>

CSS：

div {
background:red;
height:100px;
width:150px;
}

JS：

$('div').click(
    function(){
        $(this).toggle(function(){
            $(this).style.background="blue";
        }
        //function(){
        //this.style.background = "orange";
        //}
        );
    }
);

奇怪的是，当我单击它时，div 消失了，如果我取消注释注释行，草图根本不起作用。任何建议或信息表示赞赏。

4

2 回答 2

7

您不需要toggle()在click()方法中包装，只需使用：

$('div').toggle(
    function(){
        $(this).css('background-color', 'blue');
    },
    function(){
        $(this).css('background-color', 'red');
    });​

JS 小提琴演示。

此外，您正在混合使用 jQuery 和 JavaScript：

jQuery$(this)对象没有style方法；需要使用该css()方法；这两种方法不可互换，因此您可以使用该css()方法（如上），或坚持使用纯 JavaScript：

this.style.backgroundColor = 'blue';

例如，或者从 jQuery 切换到纯 JavaScript：

$(this)[0].style.backgroundColor = 'blue';

或者：

$(this).get(0).style.backgroundColor = 'blue';

这两种方法本质上都是从允许使用本机 JavaScript 方法的 jQuery 对象中检索普通 DOM 节点/对象，但是，这意味着您不能在这些节点/对象上使用 jQuery 方法) （当然，除非您将它们重新包装在 jQuery 对象中）。

当然，如果你只是想使用 jQuery 来处理事件委托，你可以使用该click()方法，再加上一个三元：

$('div').click(function(){
    this.style.backgroundColor = this.style.backgroundColor == 'blue' ? 'red' : 'blue';
});

JS 小提琴演示。

参考：

于 2012-12-25T19:09:47.087 回答
1

您只是使用了错误的切换。有两个toggles：

切换事件

和

切换效果

在您的代码中，执行了切换效果，它只是显示/隐藏一个元素。这就是为什么单击它时它会消失的原因。

于 2012-12-25T19:18:13.083 回答