在 jquery 中更改变量而不重新分配

Question

在 jquery 代码中，我将一个元素倒入一个变量中。然后通过单击btn4更改标签 < p > 的内容。然后我单击btn以按先前值复制元素，但变量也发生了更改（分配为 2），而我没有重新分配变量。为什么？我能做些什么来防止变量发生变化？在单击btn标记p后，值 2 也会从div d1中删除，为什么？let r = $("#d1 #p1");$("#btn4").click(function() {  $("#p1").html(2);});$("#btn").click(function() {  $("#d2").append(r);});#d1 {  background-color: red;  width: 130px;  height: 130px;}#d2 {  background-color: yellow;  width: 130px;  height: 130px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id='btn4'>btn4</button><button id='btn'>btn</button><div id="d1">  <p id="p1">1</p></div><div id="d2"></div>

Answer 1

尝试这样做，只需在.html()“r”声明的末尾添加：

let r = $("#d1 #p1").html();

Answer 2

我单击 btn 以按以前的值复制元素，但变量也发生了变化（分配为 2），而我没有重新分配变量。为什么？我能做些什么来防止变量发生变化？在单击 btn 标记 p 后，值 2 也会从 div d1 中删除，为什么？

发生这种情况是因为您将现有 DOM 节点附加$("#d1 #p1")到$("#d2")并在将其从退出位置移动$("#d1")到$("#d2"). 您可以通过保存clone节点的 a$("#d1 #p1")并使用它附加如下来解决它：

let r = $("#d1 #p1");

let r2 = r.clone(); // Create a clone of current node with content

$("#btn4").click(function() {

  $("#p1").html(2);

});

$("#btn").click(function() {

  $("#d2").append(r2);

});

#d1{background-color:red;width:130px;height:50px}

#d2{background-color:#ff0;width:130px;height:50px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id='btn4'>btn4</button>

<button id='btn'>btn</button>

<div id="d1"><p id="p1">1</p></div>

<div id="d2"></div>

Answer 3

我不完全知道您要执行什么操作，但是下面的这一行引用了一个 DOM 元素；

let r = $("#d1 #p1").html();

通过这样做$("#d2").append(r); ，您将r元素移动到$("#d2")元素中。这就是为什么你再也看不到它了Div d1。