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

【问题标题】：Simple script not working with .prepend() and .css() methods in jQuery简单脚本不适用于 jQuery 中的 .prepend() 和 .css() 方法
【发布时间】：2023-04-03 02:05:01
【问题描述】：

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

【问题讨论】：

标签： jquery css prepend

【解决方案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)

【讨论】：