Написать html-контент вне скрипта
У меня есть код ниже, который будет принеститекст из текста JSON и по щелчку, отображать всплывающее окно на странице.... Теперь мне нужно указать параметры для изменения семейства шрифтов, цвета шрифта и т.д....
Мне нужно добавить много HTML-кода вместо Содержание....
Есть ли способ сохранить код «контента» в HTML и отделить его от сценария?
JSON :
{
"font" : "Arian",
"x" : 201,
"y" : 461,
"type" : "text",
"text" : "Good Food",
"name" : "edit_good_1"
}
сценарий
const lightId = 'light' + layer.name
const lightIdString = '#' + lightId
$('.container').append(
'<a id = "' + layer.name + '" onclick = "openPopUp(' + lightId + ')"' +
'<div class = "txtContainer" contenteditable = "true" ' +
'style = "' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'">' + layer.text + '</div></a>' +
'<div id = "light' + layer.name + '" class = "white_content" style = "' +
'top: ' + layer.y + 'px; ' + '"> content <a href = "javascript:void(0)" ' +
'onclick = "closePopUp(' + lightId + ')">Close</a></div> <div>'
);
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'
кодовое имя: https://codepen.io/kidsdial/pen/OGbGwN
рабочий пример: https://jsfiddle.net/kidsdial1/z6eyq4j3/
@DeepakSingh Спасибо за предложение, но будет ли такой код layer.x работать в html : ? также я включил этот код в forloop....
layer.x вы должны писать на JavaScript. См. Идея состоит в том, что у вас будет фиктивный HTML, отображаемый изначально в DOM без/фиктивных данных. В разделе JavaScript вы сначала клонируете фиктивный HTML-код, а затем получаете данные, которые будут отображаться из вашего источника. После этого вам нужно просто заполнить данные и добавить их в DOM. Все это будет делаться только на JS.
@DeepakSingh извините, я новичок в этих вещах, я попробую....
Без вопросов. Это очень просто, как только вы это реализуете. Ваше здоровье
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете сделать отдельный шаблон файла html и добавить туда некоторые переменные, например:
<pre>
<div id = "{layer.name}">
<a href = "{link}">{link.name}</a>
</div>
....
</pre>
И в скрипте вы можете заменить свои переменные на данные:
$.get("/ulrOfYourHtmlTemplate").done(function(template) {
$('.container').append(template.replace("{layer.name}",layer.name).replace("{link}",link).replace("{link.name}", link.name))
})
Спасибо, можем ли мы заставить его работать в том же html-файле, а не в отдельном html-файле?
конечно, просто поместите его в переменную JS, например текст, и замените свои переменные позже. шаблон var = '<div id = "{id}">{переменная</div>';
Что вы можете сделать, так это создать div и сделать так, чтобы он не отображался. Внутри этого div вы можете поместить свой повторяющийся HTML-код, а в JavaScript, когда у вас есть данные, вы можете клонировать HTML-контент из DOM и отображать данные в клонированном HTML. Наконец, добавьте этот новый клонированный HTML в свой DOM. Например.
let template = $("div.container").find("a").clone(); $(template).attr('id', layer.name)