在 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&nbsp;r&nbsp;=&nbsp;$("#d1&nbsp;#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() {&nbsp; $("#p1").html(2);});$("#btn").click(function() {&nbsp; $("#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&nbsp;r&nbsp;=&nbsp;$("#d1&nbsp;#p1").html();通过这样做$("#d2").append(r);&nbsp;，您将r元素移动到$("#d2")元素中。这就是为什么你再也看不到它了Div d1。