Question

我需要从div1复制内容，然后单击将其粘贴/粘贴到div2。然后，如果我更改div1中的内容并再次单击该按钮，则内容应转到div3，而无需更改div2中的内容。这是我到目前为止发现的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <p>Hello world</p>
</div>
<button onclick="$('#div2, #div3').html($('#div1').html());">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

因为我分配了值，它将在两个div中粘贴相同的值，所以我不知道如何分别进行操作。我猜需要一些循环。

是否可以，如果可以，有人给我一些想法或链接来阅读材料。预先感谢！

Answer 1

您可以使用变量存储div元素的编号，然后相应地对其进行递增。（这里我假设只有div2和div3在这里）

由于您没有提到div1的值将如何更新。我是在函数$('#div1').html("New Value");中使用add()手动完成此操作。

<html>
<body>
<body>
<div id="div1">
    <p>Hello world</p>
</div>
<button onclick="add()">Copy</button>
<div id="div2"><p>div1 Placeholder</p></div>
<div id="div3"><p>div2 Placeholder</p></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var n = 2;
function add(){
$('#div'+n).html($('#div1').html());
$('#div1').html("<p>New Value</p>");
n++;
}
</script>
</body>
</html>

尝试运行该代码段。单击一次按钮会将div1的值设置为div2，然后将div1的原始内容更改为New Value。再次单击该按钮，新的div1值，即New Value将被放入div3。

尽管这也会尝试将div1再次更新为New Value，但不会进行任何更改。如果您编写其他一些方法来更新div1元素，那就更好了。

如果要保留<p>标签，请注意。嗯，这还取决于您更新div1的值的方式。

要附加，您可以使用$('#div'+n).append($('#div1').html());

Answer 2

在Saif的答案中使用带有javascript代码的脚本标签是完全有效的（您只应注意不要覆盖用于保持计数的全局变量）。为了更加美观，单击事件也可以添加到脚本标签中。

作为另一种相反方法的可能性，您可以使用jQuery的data在button属性中完成所有操作。此处的计数存储在按钮的属性中，但也可以存储在原始div #div1中。代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <p>Hello world</p>
</div>
<button onclick="$('#div' + $(this).data('targetdiv')).html($('#div1').html()); $(this).data('targetdiv', $(this).data('targetdiv') + 1);" data-targetdiv="2">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

关于data的一些重要说明：使用data更改值不会更新DOM属性本身，因为一旦从功能中获取了值，jQuery就会使用内部javascript代码来保持价值。确实没有必要对DOM进行审核，但是如果您确实希望这样做，则可以使用attr而不是data。但是，如果您使用attr，则切勿将其与对data的调用混合使用，因为后者在第一次获取值后会看不到DOM更新（因为它使用存储在内部的javascript缓存，而不是读取DOM属性。

Answer 3

我写了一些帮助代码来帮助您入门。因此，我要做的就是将逻辑移至一个对变量i进行迭代的函数（该变量只能取值2和3）。这不会检查文本是否已更改，并且每次单击时都会依次覆盖div2和div3（如果仅测试一次，则删除test）。

<html>
<body>
<body>
<div id="div1">
    <p>Hello world</p>
</div>
<button onclick="copyPaste()">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
   var i = 2;
   function copyPaste() {
      //add logic to check if text has changed before executing next line
      $(`#div${i++}`).html($('#div1').html());
      if(i < 3) i = 2; 
   }
</script>
</body>
</html>

将div内容复制/克隆到另一个div

3 个答案: