1

今天我遇到了一件我不太明白的有趣的事情。这个（见下文）非常简单的 jQuery 脚本不起作用，如果蓝色 == true（这是真的），基本上我想将前置 div 的背景颜色更改为红色。

var panel = $("<div id='panel'></div>");
var panelBg = $("#panel");

var test = "true";
var red  = "true";
var blue = "true";


if (test == "true") {


    if (red == "true") {

       $("#first").prepend(panel);

    }



    if (blue == "true") {

       panelBg.css("background-color","red");

    }


}

但是当我改变这一行时：

  panelBg.css("background-color","red");

对此：

  $("#panel").css("background-color","red");

脚本有效。

工作演示：http: //jsfiddle.net/wK2jw/

4

2 回答 2

7

在您查找时#panel，它还不存在于 DOM 中，因此此行不返回任何对象：

var panelBg = $("#panel");

当您这样做时它会起作用，$("#panel").css("background-color","red");因为这是在您将具有 id=panel 的元素添加到 DOM 之后执行的。

即使panelBg在您分配它时确实有效，panelBgandpanel引用无论如何都会指向相同的元素，因此使用两个变量指向同一事物似乎没有任何意义。

于 2012-06-04T16:56:58.693 回答
0

是的，您正在将 DOM 中尚不存在的对象分配给变量。

你可以移动 var panelBg = $("#panel"); 在您添加代码之后。

附带说明一下，您也可以稍微清理一下代码，而不是 if (test == "true") 您可以使用 if (test)

于 2012-06-04T18:16:54.603 回答