javascript 通过单击切换背景颜色更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14033265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggling a background color change by clicking
提问by David West
I was quickly doing a jsFiddle to learn more about the jQuery API, and a fiddle isn't working the way I expected.
我正在快速地做一个 jsFiddle 来了解有关 jQuery API 的更多信息，但是一个 fiddle 没有按我预期的方式工作。
jsFiddle: http://jsfiddle.net/7j5Fc/
jsFiddle：http: //jsfiddle.net/7j5Fc/
HTML:
HTML：
<div></div>
CSS:
CSS：
div {
background:red;
height:100px;
width:150px;
}
JS:
JS：
$('div').click(
function(){
$(this).toggle(function(){
$(this).style.background="blue";
}
//function(){
//this.style.background = "orange";
//}
);
}
);
Strangely, the div disappears when I click it, and if I uncomment the commented lines the sketch doesn't work at all. Any suggestions or info appreciated.
奇怪的是，当我点击它时 div 消失了，如果我取消注释注释行，草图根本不起作用。任何建议或信息表示赞赏。
回答by David says reinstate Monica
You don't need to wrap the toggle()in the click()method, just use:
您不需要将 包装toggle()在click()方法中，只需使用：
$('div').toggle(
function(){
$(this).css('background-color', 'blue');
},
function(){
$(this).css('background-color', 'red');
});?
Also, you're mixing jQuery and JavaScript:
此外，您正在混合使用 jQuery 和 JavaScript：
The jQuery $(this)object has no stylemethod; that requires the use of the css()method; the two approaches are not interchangeable, so you could either use the css()approach (above), or stick with plain-JavaScript:
jQuery$(this)对象没有style方法；需要使用该css()方法；这两种方法不可互换，因此您可以使用css()方法（如上），也可以坚持使用纯 JavaScript：
this.style.backgroundColor = 'blue';
For example, or switch from jQuery to plain JavaScript:
例如，或者从 jQuery 切换到纯 JavaScript：
$(this)[0].style.backgroundColor = 'blue';
Or:
或者：
$(this).get(0).style.backgroundColor = 'blue';
Both of these approaches essentially retrieve the plain DOM node/object from the jQuery object which allows native JavaScript methods to be used, it does, however, mean that you can't then use jQuery methods on those node(s)/object(s) (unless you re-wrap them in a jQuery object, of course).
这两种方法本质上都是从允许使用原生 JavaScript 方法的 jQuery 对象中检索纯 DOM 节点/对象，但是，这确实意味着您不能在这些节点/对象上使用 jQuery 方法)（当然，除非您将它们重新包装在 jQuery 对象中）。
Of course, if you just want to use jQuery to handle the event-delegation, you could use the click()method, coupled with a ternary:
当然，如果你只是想使用 jQuery 来处理事件委托，你可以使用该click()方法，再加上一个三元：
$('div').click(function(){
this.style.backgroundColor = this.style.backgroundColor == 'blue' ? 'red' : 'blue';
});
References:
参考：
回答by Viktor S.
You just used wrong toggle. There are two toggles:
你只是使用了错误的切换。有两个toggle：
and
和
In your code, toggle Effect were executed which simply show/hide an element. That is why it disappears when you click it.
在您的代码中，执行了切换效果，它只是显示/隐藏一个元素。这就是为什么当您单击它时它会消失的原因。
