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

我很快在做一个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消失，如果我不开心对草图完全不起作用的评论线进行评论。任何建议或信息表示赞赏。

来源

2012-12-25 David West

你在哪里链接到jsFiddle？ –

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

有时，只需阅读文档可以帮助很多：http://api.jquery.com/toggle-event/。但是，请注意，此方法已弃用。 –

你不需要包裹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对象，其允许使用本地JavaScript方法平原DOM节点/对象，它母鹿但是，这意味着你不能在这些节点/对象上使用jQuery方法（当然，除非你将它们重新包装在一个jQuery对象中）。

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

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

JS Fiddle demo。

参考文献：

来源

2012-12-25 19:09:47

不知道downvote来自哪里，很好的答案 – MarioDS

这是因为（我*认为*，因为没有评论），在我的初稿中，我没有看到纯粹的JavaScript链接到jQuery的混合;这是当之无愧的投票（但谢谢！）= D –

这是一个很好的答案。谢谢。 'this.style.background ='蓝色';'也适用。注意到我在'function（）'之间忘记了两个逗号。 –

您刚刚使用了错误的切换。有两种toggle S：

toggle Event

和

toggle Effect

在你的代码，切换效果分别执行它只是显示/隐藏的元素。这就是它点击它时会消失的原因。

来源

2012-12-25 19:18:13

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

回答

相关问题