JQ html标签动态拼接的技巧

旧城等待， 2022-06-05 23:36 257阅读 0赞

**1、需要循环拼接到页面上的html标签**

information :'<div class="info\_box" orderNo="\{12\}">'+  
'<div class="title\_box">'+  
'<span id="title" class="title \{10\}">\{8\}</span>'+  
'<span id="state" class="state \{11\}">\{9\}</span>'+  
'</div>'+  
'<ul class="information">'+  
'<li>'+  
'<img src="../../img/repair/icon\_pinpai.png" />'+  
'<span class="classify">品牌：</span>\{0\}'+  
'</li>'+  
'<li>'+  
'<img src="../../img/repair/icon\_xinghao.png" />'+  
'<span class="classify">型号：</span>\{1\}'+  
'</li>'+  
'<li>'+  
'<img src="../../img/repair/icon\_xitong.png" />'+  
'<span class="classify">系统：</span>\{2\}'+  
'</li>'+  
'<li>'+  
'<img src="../../img/repair/icon\_bianhao.png" />'+  
'<span class="classify">编号：</span>\{3\}'+  
'</li>'+  
'<li>'+  
'<img src="../../img/repair/icon\_quyu.png" />'+  
'<span class="classify">区域：</span>\{4\}'+  
'</li>'+  
'<li>'+  
'<img src="../../img/repair/icon\_time.png" />'+  
'<span class="classify">时间：</span>\{5\}'+  
'</li>'+  
'<li>'+  
'<img src="../../img/repair/icon\_wenti.png" />'+  
'<span class="classify">问题：</span>\{6\}'+  
'</li>'+  
'</ul>'+  
'<div class="more\_info">\{7\}</div>'+  
'<i></i>'+  
'</div>',

2、根据从数据库拿到的数据循环拼接

var html = "";  
for (var i = 0, list = data.list; i < list.length; i++) \{  
html += index.getHtml(list\[i\]);  
\}

//如果是第一页则覆盖页面原有的 html，这样同页面不同状态点击切换时，数据不会叠加在一起。

if(index.defaultOption.pages == 1)\{  
$('\#repair\_list').html(html);  
\}else\{

//如果不是第一页，添加，用于移动端下拉加载更多数据的情景。  
$('\#repair\_list').append(html);  
\}

**3、将不同状态下不同的 css 样式和文字这种需要动态获取又无法从数据库中拿到的数据提取出来，**

**通过判断赋值给自定义的变量，这样动态拼接的时候只需将指定变量放进去，变量的实际内容自会根据**

**不同的条件获取到相对应的值。**

/\*\*

\* 拼接html  
 \*/  
getHtml : function (obj) \{  
var html = '';  
var tabClass = "",maintenanceClass = '',title='',msg = '';  
if(obj.evalState == '0')\{  
tabClass = 'maintenance';  
maintenanceClass = 'maintenance';  
title = "1";  
msg = '1';  
\} else if(obj.evalState == '2' && obj.orderState == '4')\{  
tabClass = 'waiting\_confirm';  
maintenanceClass = 'waiting\_confirm';  
title = "2";  
msg = '2';  
\} else if(obj.evalState == '1' && obj.orderState == '2')\{  
title = "3";  
msg = '3';  
\} else if(obj.evalState == '3')\{  
tabClass = 'assess\_nopass';  
maintenanceClass = 'assess\_nopass';  
title = "4";  
msg = '4';  
\} else if(obj.evalState == '4')\{  
tabClass = 'assess\_nopass';  
maintenanceClass = 'assess\_nopass';  
title = "5";  
msg = '5';  
\} else if(obj.evalState == '2' && obj.orderState == '5')\{  
tabClass = 'state.repair\_finished';  
maintenanceClass = 'repair\_finished';  
title = "6";  
msg = '6;  
\}  
html = index.defaultOption.information.replace("\{0\}",obj.brandName)  
   .replace("\{1\}",obj.machineType)  
   .replace("\{2\}",obj.sysName)  
   .replace("\{3\}",obj.machineNo).replace(\{4\}",obj.province.concat(".".concat(obj.city.concat(".".concat(obj.county)))))  
.replace("\{5\}",obj.createTime)  
.replace("\{6\}",obj.orderProblem)  
.replace("\{7\}",msg)  
.replace("\{8\}",obj.modelName)  
.replace("\{9\}",title)  
.replace("\{10\}",tabClass)  
.replace("\{11\}",maintenanceClass)  
.replace("\{12\}",obj.orderNo);  
return html;  
\},