Question

我有3个页面，其中包含一些具有相同结构的块。我不想多次重复相同的代码，所以我想做的是一个存储html结构的函数，每当我需要动态显示HTML的那部分时我都会调用它。不知道如何正确地做到这一点数据来自JSON Object。

这就是我试图做的事情：

function generateHtml() {
    var generateContent = '';
    generateContent += '<div id="blockAlarme" name="blockAlarme" clas="clsBlock">';
    generateContent += '<div id="blockAlarmeHeader" name="blockAlarmeHeader" class="clsBlockHeader">';
    generateContent += '<div class="clsBlockHeaderTitle">Alarme</div>';
    generateContent += '<div class="clsBlockHeaderReduce"></div>';
    generateContent += '</div>';
    generateContent += '<div id="blockAlarmeContent" name="blockAlarmeContent" class="clsBlockContent"></div>';
    generateContent += '</div>';
}

然后我必须在Ajax附加的html代码中调用它，以便它显示内容。

Answer 1

我建议使用网络组件，这是一篇很好的文章：https://toddmotto.com/web-components-concepts-shadow-dom-imports-templates-custom-elements/

但是，您也可以使用JQuery执行以下操作：

＆＃13;

var alarmData = [
  {name: "Alarm 1",text: "This is an alarm"},
  {name: "Blue Alarm",text:"BEEP BEEP BEEP"}
];

$.each(alarmData, function(i, alarm) { 
    var block = $('<div/>', {
      class: 'clsBlock'
    }).appendTo($('#container'));
    
    var header = $('<div/>', {
      class: 'clsBlockHeader',
      html: alarm.name
    }).appendTo(block);
    
    var content = $('<div/>', {
      class: 'clsBlockContent',
      html: alarm.text
    }).appendTo(block);
});

＆＃13;

.clsBlock {
width: 200px; height: 100px;
border: 1px solid blue;
margin: 5px;
}
.clsBlockHeader {
background-color: blue;
color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

＆＃13;

函数采用Html结构并在我们想要动态显示时调用它

1 个答案: