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

Posted 2023-04-13

【中文标题】简单脚本不适用于 jQuery 中的 .prepend() 和 .css() 方法

【英文标题】：Simple script not working with .prepend() and .css() methods in jQuery

【发布时间】：2012-06-04 16:53:25

【问题描述】：

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

【参考方案1】：

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

var panelBg = $("#panel");

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

即使 panelBg 在您分配它时确实有效，panelBg 和 panel 引用仍将指向相同的元素，因此使用两个变量似乎没有任何意义指向同一个东西。

【参考方案2】：

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

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

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