简单脚本无法与jQuery中的.prepend（）和.css（）方法一起使用

Question

今天，我遇到了一件我不太了解的有趣事情。 这个（见下文）非常简单的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/

Answer 1

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

var panelBg = $("#panel");

当您执行$("#panel").css("background-color","red"); 因为这你已经添加的元素与ID =面板到DOM 后执行。

即使panelBg在分配时确实起作用， panelBg和panel引用也将始终指向相同的元素，因此使用两个变量指向同一事物似乎没有意义。

Answer 2

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

您可以移动var panelBg = $（“＃panel”）; 在您添加代码之前。

附带说明一下，您也可以清理一下代码，而不是if（test ==“ true”），而可以使用if（test）