jquery - 简单脚本不适用于 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","re​​d"); 时它会起作用，因为这是在您之后执行的已将 id=panel 的元素添加到 DOM 中。

即使 panelBg 在您分配它时确实起作用，panelBg 和 panel 引用无论如何都会指向相同的元素，所以使用两个变量来指向同一件事似乎没有任何意义。