div中循环生成button并添加点击事件

遨游在知识的海洋里无法自拔

已于 2022-03-18 17:57:50 修改

阅读量3k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-03-18 17:55:09 首次发布

本文链接：https://blog.csdn.net/qq_58148854/article/details/123580820

版权

该博客讲述了如何根据后端返回的班级信息动态生成HTML按钮，并为每个按钮添加单击事件。按钮点击后会判断日期，如果未超过30天则跳转到评价表单，否则显示过期提示。代码中使用了JQuery和layui进行操作。

摘要由CSDN通过智能技术生成

1. 需求:根据班级的数量动态生成按钮.

2.后端返回的是一个集合,遍历集合,将标签字符串存储到str字符串里面.

3.效果图:

4.既然生成了按钮,就必须添加单击事件:

要让页面显示效果，必然在页面添加dom元素！如果想要多个button，那么循环添加必不可少。

setTimeout(function () {
            var datas;
            var classIdsInfo= $("#classIds").val();

            admin.post({
                url:"/jwAllBjBaseinfo/classIds/"+classIdsInfo,
                done:function (data) {
                    datas=data;
                    debugger
                    var classInfo=data.data;

                    var people = $('#classIds').val();
                    var str="";
                    var a=0;
                    for (const argument of classInfo) {
                        a++;
                        debugger
                       /* str+=('<input class="layui-btn layui-btn-sm layuiadmin-btn-list" type="button" ' +
                            'style="margin-top:25px;text-align: center;height:30px;width:250px;color: #E7F6F4" ' +
                            'name="'+"className"+a+'" id="'+"className"+a+'" value="'+argument.name+'" ><br>')*/
                        str+=('<a href=\'javascript:void(0)\' style="color:#0d87ea;" id='+"className"+a+'>'+argument.name+'</a><br><br>')
                    }
                    document.getElementById("LAY-select-classId").innerHTML=str;

                    for (let i = 0; i < classInfo.length; i++) {
                        $("#className"+(i+1)).on("click",function () {

                            var endDate = classInfo[i].endDate;
                            var dangqian = new Date();
                            var dangqians = dangqian.getTime();
                            var endTime=new Date(endDate);
                            var endTimes = endTime.getTime();
                            var day =  ((dangqians-endTimes)/1000/86400);

                            if(day<30){
                                debugger
                                location.hash = "/jxcp/evaluationForm";
                                form.val("LAY-pcb-form",
                                    classInfo[i].id
                                )
                            }else{
                                layer.msg("已过期"+ Math.trunc(day-30)+"天")
                            }

                        })
                    }
                }
            })

        },700)

代码详解:

1. 需求:根据班级的数量动态生成按钮.

 var str="";
 var a=0;
 for (const argument of classInfo) {
                a++;
              
                /* str+=('<input class="layui-btn layui-btn-sm layuiadmin-btn-list" type="button" ' +
                            'style="margin-top:25px;text-align: center;height:30px;width:250px;color: #E7F6F4" ' +
                            'name="'+"className"+a+'" id="'+"className"+a+'" value="'+argument.name+'" ><br>')*/
                str+=('<a href=\'javascript:void(0)\' style="color:#0d87ea;" id='+"className"+a+'>'+argument.name+'</a><br><br>')
}

2.后端返回的是一个集合,遍历集合,将标签字符串存储到str字符串里面.

document.getElementById("LAY-select-classId").innerHTML=str;

1.测试用的数据，采用JQuery的存储方式。
2.document.getElementById("LAY-select-classId").innerHTML=str;用于生成str语句中的内容，innerHTML为覆写操作，如果想在页面添加而不影响原本的元素，可以用append操作。
3.document.getElementById("LAY-select-classId").innerHTML=str;是js原生写法，等同于$("#LAY-select-classId").html(str); 这是JQuery写法。同样可以实现。
但是有趣的是 $("#LAY-select-classId").innerHTML=str并不能运行，看来
$(“#LAY-select-classId”)并不完全等同document.getElementById(“people”)。
这是因为JQuery是DOM的封装和拓展，并不完全等于dom元素。

3.效果图:

4.既然生成了按钮,就必须添加单击事件:

for (let i = 0; i < classInfo.length; i++) {
                        $("#className"+(i+1)).on("click",function () {

                            var endDate = classInfo[i].endDate;
                            var dangqian = new Date();
                            var dangqians = dangqian.getTime();
                            var endTime=new Date(endDate);
                            var endTimes = endTime.getTime();
                            var day =  ((dangqians-endTimes)/1000/86400);

                            if(day<30){
                                debugger
                                location.hash = "/jxcp/evaluationForm";
                                form.val("LAY-pcb-form",
                                    classInfo[i].id
                                )
                            }else{
                                layer.msg("已过期"+ Math.trunc(day-30)+"天")
                            }

                        })
                    }

首先遍历集合动态生成单击事件,根据生成的标签,自己定义了name和id,通过$("#id")获取标签就可以生成单击事件.