一、场景
前端html需要点击增加按钮之后在原有的div元素后增加多个元素。
二、问题
1、js控制添加元素
2、添加后样式后加载渲染问题
三、实现
1、js动态控制添加元素
步骤一:拼写字符串
以html已有的div为基础,js循环拼写,动态控制写入html页面进行展示。
(1)获取html页面中已有的div代码
此处的div代码我就不赘述了,就是你前台自己html页面中自己写的,接下来你要重复出现的目标代码。
(2)js拼写
因为要重复出现,此处最好写一个公共方法。例如此处小编的写法如下:
1
2
3
4function dealInfo(参数){ var str = "拼接的目标div代码"; return str }
步骤二:拼接写入html页面
然后是点击事件拼写,插入到页面(此处为了规范,我是调用的按钮监听组,观摩到该偏的同志们大可以使用$("id").click(function{...})来进行使用,效果都一样的),这里都很也没什么多强调的,这一步需要注意的两个技巧就是:页面插入用html()方法,在插入完之后在已插入的元素后面拼接需要插入的目标元素用after()方法,append()方法是在插入的元素内拼接,所以此处不用append而使用after。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18addDeal:function () { if(0==cla){ var str = dealInfo(cla); var nextNode = "<div id="dealBaseInfo"+(cla+1)+"" style="margin-top: 10%;"></div>"; $("#dealBaseInfo").html(str); $("#dealBaseInfo").after(nextNode); form.render(); cla++; }else{ var str = dealInfo(cla); var nextNode = "<div id="dealBaseInfo"+(cla+1)+"" style="margin-top: 10%;"></div>"; $("#dealBaseInfo"+cla).html(str); $("#dealBaseInfo"+cla).after(nextNode); form.render(); cla++; } }
略提一下,也是为了总结之后方便自己使用
①js按钮监听代码,如下易得,是根据myDlog来统一获取所有该样式的元素,若用该方式的话加上这个样式即可监听
1
2
3
4
5
6
7
8//按钮监听组 $('.myDialog').on('click', function() { var type = $(this).data('type'), url = $(this).data('url'), tit = $(this).children('cite').text(); panelaction[type] ? panelaction[type].call(this) : ''; });
②页面代码配合使用按钮监听组,上面已经介绍一点了,还需要增加的便是data-type属性,以便定位目标元素
1
2
3<button type="button" id="morePeople" data-type="morePeople" class="layui-btn layui-btn-warm myDialog"> <i class="layui-icon"></i>按钮 </button>
③页面插入的html代码,加上该句就有插入的目标代码啦
1
2
3<div id="contentDeal"> <div id="dealBaseInfo" style="margin-top: 10%;"></div> </div>
2、添加后样式后加载渲染问题
这个问题很恶心啊,细心的小伙伴应该发现上面的代码中我在插入页面代码之后又form.render()了一下,这个主要是为了解决css样式后加载问题,因为用的人家的框架,你在打开页面的时候就已经加载完一次这个样式了,所以你得全面或者局部后加载一下css样式。此处,小编是写到表单form中的,除此之外还有table。所以就可以使用form.render()来将页面中所有的form样式再重新加载一遍了。代码如下(可以看上也可以看下),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33layui.define(['jquery', 'table','form'], function(exports) { $ = layui.$; form = layui.form; table = layui.table; //按钮监听组 $('.myDialog').on('click', function() { var type = $(this).data('type'), url = $(this).data('url'), tit = $(this).children('cite').text(); panelaction[type] ? panelaction[type].call(this) : ''; }); var panelaction = { addDeal:function () { if(0==cla){ var str = dealInfo(cla); var nextNode = "<div id="dealBaseInfo"+(cla+1)+"" style="margin-top: 10%;"></div>"; $("#dealBaseInfo").html(str); $("#dealBaseInfo").after(nextNode); form.render(); cla++; }else{ var str = dealInfo(cla); var nextNode = "<div id="dealBaseInfo"+(cla+1)+"" style="margin-top: 10%;"></div>"; $("#dealBaseInfo"+cla).html(str); $("#dealBaseInfo"+cla).after(nextNode); form.render(); cla++; } } }); } });
以上便是所有的经验总结啦。
最后
以上就是暴躁钢笔最近收集整理的关于Layui动态添加节点以及后加载样式问题解决的全部内容,更多相关Layui动态添加节点以及后加载样式问题解决内容请搜索靠谱客的其他文章。
发表评论 取消回复