Question

我很快就开始使用jsFiddle来了解有关jQuery API的更多信息，而且这个小提琴并没有像我预期的那样工作。

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消失了，如果我取消注释注释行，草图根本不起作用。任何建议或信息赞赏。

Answer 1

您无需在toggle()方法中包含click()，只需使用：

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

JS Fiddle demo

此外，您正在混合使用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';

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

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

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

JS Fiddle demo

参考文献：

Answer 2

您刚使用了错误的切换功能。有两个toggle s：

toggle Event

和

toggle Effect

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

通过单击切换背景颜色更改

2 个答案: