JS焦点改变查询，显示模糊

Question

我希望我能解释一下 'problem' 我有。

我想点击文本（在我的例子中是可编辑的div）
编辑一个“code/command/query/instruction
On release/blur 用生成的数据替换内部内容

它正在运行...但我相信我可以用更少的代码来完成它...可以吗？让我告诉你我到目前为止有什么。我不介意是否需要更改可编辑的 div.

/* I don't like messy code */

var header = document.getElementById('header');
var lead = document.getElementById('lead');
var article = document.getElementById('article');

header.addEventListener("blur", render);
header.addEventListener("focus", edit);

lead.addEventListener("blur", render);
lead.addEventListener("focus", edit);

article.addEventListener("blur", render);
article.addEventListener("focus", edit);



function render() {
      this.setAttribute("XPQ", this.innerHTML );
      this.innerHTML = 'dynamic data from db (example)  bla, bla bla bla and more bla';
}

function edit() {
      this.innerHTML = this.getAttribute("XPQ");   
}

/*
    ---  CSS Isn't important  ---
*/

body{font-family:arial}h4{colour:red;}strong{colour:blue;}h4#header,#lead,#article{background:rgba(205,205,5,0.1);padding:3px;}

<h4 id="header" contenteditable="true" xpq="$post[1]['header']  --  (example)">dynamic data from db (example)</h4>
<p><strong id="lead" contenteditable="true" xpq="$example">this is the same as above (example)</strong></p>
<p id="article" contenteditable="true" xpq="/html/body/div[1]"> but of course all 3 have difrent data. I just tried to keep is simple to explain my problem. My idea is to use Javascript with PHP. Only I'm not so great with Javascript jet. I wonder if there was a clear way to make the JS.  Without using on every element  a blur and focus listener.</p>

我很好奇如何改进我的代码。如果你能提供帮助，我将不胜感激。

Answer 1

通过单独使用 getElementById 向所有元素添加事件侦听器并不好。您可以在所有想要具有此行为的元素上使用相同的 class。然后使用 querySelectorAll 获取它们并使用 forEach 到 addEventListner

document.querySelectorAll('.editable').forEach(x => {
  x.addEventListener("blur", render);
  x.addEventListener("focus", edit);

})




function render() {
      this.setAttribute("XPQ", this.innerHTML );
      this.innerHTML = 'dynamic data from db (example)  bla, bla bla bla and more bla';
}

function edit() {
      this.innerHTML = this.getAttribute("XPQ");   
}

/*
    ---  CSS Isn't important  ---
*/

body{font-family:arial}h4{colour:red;}strong{colour:blue;}h4#header,#lead,#article{background:rgba(205,205,5,0.1);padding:3px;}

<h4 id="header" class="editable" contenteditable="true" xpq="$post[1]['header']  --  (example)">dynamic data from db (example)</h4>
<p><strong id="lead" class="editable" contenteditable="true" xpq="$example">this is the same as above (example)</strong></p>
<p id="article" class="editable" contenteditable="true" xpq="/html/body/div[1]"> but of course all 3 have difrent data. I just tried to keep is simple to explain my problem. My idea is to use Javascript with PHP. Only I'm not so great with Javascript jet. I wonder if there was a clear way to make the JS.  Without using on every element  a blur and focus listener.</p>

JS焦点改变查询，显示模糊

JS focus to change query, blur on display

javascript

innerhtml

addeventlistener