简单的脚本不能使用jQuery中的.prepend()和.css()方法

Question

今天我遇到了一个我不太了解的有趣的事情.这个(见下文)非常简单的jQuery脚本无法正常工作,基本上我想将前置div的背景颜色更改为红色,如果蓝色== true(这是真的).

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 = panel的元素添加到DOM 之后执行此操作.

即使panelBg当时没有工作分配吧,panelBg并panel引用将在相同的元素反正指点,所以似乎没有被任何点使用两个变量在同样的事情一点.