更改 <div> 部分的背景颜色答案

【问题标题】：Changing the background color of a <div> section更改 <div> 部分的背景颜色
【发布时间】：2011-11-29 03:31:15
【问题描述】：

我正在尝试使用jQuery 在按下按钮时更改<div> 部分的背景颜色，下面是执行此操作的代码。为什么它不起作用？

HTML 文件

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>

</html>

script.js

$("bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

谢谢。

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

确保在您希望定位的 jQuery 中包含 CSS 选择器。

$("bgcolor").click(function(){

应该是：

$("#bgcolor").click(function(){

因为您的目标是一个 ID。

【讨论】：

我该怎么做你提到的：Ensure you include the CSS selector inside the jQuery that you wish to target.？谢谢
您已为输入提供了 bgcolor 的 ID，在 CSS 术语中，它由井号标识，例如#bgcolor。与类类似，它们由句点/句号标识，例如.bgcolor。您需要确保当您在 jQuery 中定位这些对象时，您包含 CSS 选择器字符（哈希或句点）。
您可能已经了解，但如果不了解，请参阅bit.ly/2QVpu8，这是关于 CSS 选择器的另一个 Stack 问题。

【解决方案2】：

你有几个问题：

您的选择器错误：$("#bgcolor")
您缺少结束 </div> 标记。
您需要jQueryUI 来为background-color 设置动画。

HTML：

<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</div>

JS：

$("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

您的代码，已修复（包括使用 jQueryUI）：http://jsfiddle.net/andrewwhitaker/rAVj9/

【讨论】：

通过从http://marcofolio.net/ 询问 Marcos，我不得不在我的 jQuery 周围添加这个：$(function() {....});。对于这样做的原因，他说：To execute jQuery code, the document has to be fully ready to attach the desired handlers.
@Med-SWEng：那是正确的——我不知道您是否从您的$(document).ready(...) 处理程序内部共享您的脚本。很高兴你明白了。

【解决方案3】：

来自 jQuery 网站：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理。（例如，width、height 或 left 可以设置动画，但 background-color 不能设置。）

使用 jquery UI 包为颜色设置动画。

【讨论】：

您可以使用计时器更改类名...并通过创建多个类（即#name0..9）来模拟动画。