JS фокус, чтобы изменить запрос, размытие на дисплее - PullRequest
Новая
       39

JS фокус, чтобы изменить запрос, размытие на дисплее

1 голос
/ 13 апреля 2019

Я надеюсь, что смогу объяснить эту «проблему», которая у меня есть.

  • Я хочу нажать на текст (в моем случае редактируемый div)
  • Редактировать "код / ​​команду / запрос / инструкцию
  • При выпуске / размытии заменитьвнутреннее содержимое с сгенерированными данными

Это работает ... но я верю, что смогу сделать это с меньшим количеством кода ... Можно? Позвольте мне показать вам, что у меня есть. Я не противесли мне нужно изменить редактируемый 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>

Мне интересно, как я могу улучшить свой код.Я был бы благодарен за вашу помощь.

1 Ответ

1 голос
/ 13 апреля 2019

Нехорошо добавлять прослушиватели событий ко всем элементам, заставляя их самостоятельно использовать getElementById. Вы можете иметь один и тот же класс на всех элементах, которые хотят иметь такое поведение. А затем используйте 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>
...