定位每个 div（相同的类名）并将其内容复制到 Javascript 中的另一个 div

Question

我有多个具有相同类名的 div。如何定位每个 div 并将其内容复制到另一个 div，编辑内容并将其复制回其原始 div？ 这是我的代码； HTML

<div id="div-editor">
    <h1>Title of div to be edited goes here</h1>
    <p>Paragraph of div to be edited goes here</p>
</div>
<div class="div-content" onclick="makeDivEditable()">
    <h1>Div one title</h1>
    <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div two title</h1>
    <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div three</h1>
    <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div four title</h1>
    <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>

JavaScript

function makeDivEditable(){
  var divContent = document.getElementsByClassName('div-content');
  var divEditor = document.getElementById('div-editor');
  divEditor.innerHTML = divContent[0].innerHTML;
  divEditor.contentEditable = true;
}

此代码仅影响第一个 div（div one）我如何使其也影响其他 div？ 我希望它的方式是，如果我单击任何 div，其内容应复制到 div-editor。一旦我完成编辑，它应该被复制回原来的 div。

Answer 1

我会在下面做：

let currentEditingNode;
const defaultEditingNodeContent = document.getElementById('div-editor').innerHTML;

window.makeDivEditable = function makeDivEditable(e = window.event){
  var divContent = (e.target || e.srcElement).parentElement;
  var divEditor = document.getElementById('div-editor');
  divEditor.innerHTML = divContent.innerHTML;
  divEditor.contentEditable = true;
  currentEditingNode = divContent;
}

window.submitEdit = function submitEdit() {
  if (currentEditingNode) {
       var divEditor = document.getElementById('div-editor');
       currentEditingNode.innerHTML = divEditor.innerHTML;
       divEditor.contentEditable = false;
       divEditor.innerHTML = defaultEditingNodeContent;
  }
}

<div id="div-editor">
    <h1>Title of div to be edited goes here</h1>
    <p>Paragraph of div to be edited goes here</p>
</div>
<button id="submit-edit" onclick="submitEdit()">submit edit</button>
<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div one title</h1>
    <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div two title</h1>
    <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div three</h1>
    <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div four title</h1>
    <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>

你可以玩！

请注意，我将event 传递给包含被单击目标元素的内联事件处理程序。由于您要编辑整个父 div，因此我需要选择单击元素的祖先。请注意，event 中返回的元素可能是其他元素。理想情况下，我会在复制内容之前检查类名 div-content 是否与 (e.target || e.srcElement).parentElement 匹配

Answer 2

为什么不使用onclick 事件处理程序，而不是将其作为属性添加到DOM 中？然后，使用提供给事件处理程序的事件对象。

<div id="div-editor">
  <h1>Title of div to be edited goes here</h1>
  <p>Paragraph of div to be edited goes here</p>
</div>
<div class="div-content">
  <h1>Div one title</h1>
  <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content">
  <h1>Div two title</h1>
  <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content">
  <h1>Div three</h1>
  <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content">
  <h1>Div four title</h1>
  <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>

let content_divs = new Array(...document.getElementsByClassName("div-content"));
content_divs.forEach((div) => {
  div.onclick = makeDivEditable;
});
function makeDivEditable(e) {
  let divEditor = document.getElementById("div-editor");
  divEditor.innerHTML=e.target.innerHTML;
}

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

Answer 3

使用 textarea 而不是 div

var divs;
var cnt;
var divEditor;
function makeDivEditable(){

divs = document.getElementsByClassName('div-content');

for(let i=0;i<divs.length;i++){   
   if(event.target == divs[i].getElementsByTagName('h1')[0]  ){
    cnt = i;  
    console.log(event.target.innerHTML);
    divEditor = document.getElementById('div-editor');
    divEditor.value = event.target.innerHTML;
    console.log(cnt);
        }}
  
}

function myUpdate(){
   var text = document.getElementById('div-editor').value;
   divs[cnt].getElementsByTagName('h1')[0].innerHTML = text;
   cnt=0;
}

textarea{
width:100%;}

<textarea id="div-editor" onchange="myUpdate()">
    <h1>Title of div to be edited goes here</h1>    
</textarea>

<textarea id="div-editor2" onchange="myUpdate()">
    <p>Paragraph of div to be edited goes here</p>  
</textarea>


<div class="div-content" onclick="makeDivEditable()">
    <h1>Div one title</h1>
    <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div two title</h1>
    <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div three</h1>
    <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div four title</h1>
    <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>