JQ html标签动态拼接的技巧
来源:互联网 发布:quest bar 知乎 编辑:程序博客网 时间:2024/05/22 05:20
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;
},
- JQ html标签动态拼接的技巧
- jq动态拼接标签的两种方法及其注意事项
- java后台动态拼接html标签
- jq清除html标签
- 拼接html标签
- 动态拼接html
- jq获取动态生成元素(标签)的参数值
- jq动态生成的元素(标签)添加点击事件
- HTML+jq动态添加节点
- js动态拼接标签,样式丢失的解决方法
- 前端标签的小技巧-----自定义标签属性(灵活使用js/JQ脚本)
- JQ插入和移除HTML标签
- HTML中Img标签的技巧
- html meta标签的应用技巧
- html的自定义标签 奇淫技巧
- 动态修改html input标签的属性
- 表单的动态拼接
- jq的导航和标签
- poj 3150 Cellular Automaton(迷糊,但原理是用的快速幂)
- Android优化UI(二)
- 实现通过桥梁ActivityB实现Activity A 启动Activity C
- php匿名函数
- React Native 解决Text在iOS、android中更改字体变大,导致项目文字变大布局错乱
- JQ html标签动态拼接的技巧
- RSA加密算法
- 官网 elastic 简单的搜索使用
- scrapy初始第二波——爬取知乎首页的问题和回答并写入mysql中
- php工作原理
- 程序在计算机内部是如何运行的?
- yum无法使用
- 802.11协议 文档资料整理
- dlib 人脸识别库编译