Question

我有下面的代码，可以从 JSON 和 onclick 文本获取文本，在弹出的框中显示页面。...现在，我需要提供一些选项来更改字体系列，字体颜色等。

我需要在内容的位置添加很多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'

codepen：https://codepen.io/kidsdial/pen/OGbGwN

小提琴：https://jsfiddle.net/kidsdial1/z6eyq4j3/

Answer 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内容

1 个答案: