layui实际应用中批量button点击事件的正确添加及处理方式

╰+哭是因爲堅強的太久メ 2023-10-05 13:13 12阅读 0赞

给出两种批量按钮事件添加及处理方法

**btnAction.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="res/layui/css/layui.css">
        <script src="res/layui/layui.js"></script>
    </head>
    <body>
        <button class="layui-btn" id="add">新增Tab项</button>
    	<button class="layui-btn" id="edit">编辑</button>
        <button class="layui-btn" id="save">保存</button>
        <button class="layui-btn" id="back" >返回</button>
    
     
     
    
    <script src="res/js/btnAction.js"></script> 
    </body>
    </html>

**btnAction.js**

layui.use(['jquery','layer','element'], function(){
    	var $ = layui.$,
    	    layer = layui.layer,
    	    element = layui.element;
    
    	//用case语法动态添加按钮处理事件
    // 	$(".layui-btn").click(function(){
    // 		var id = $(this).attr('id');
    // 	   //alert(id);
    // 		switch(id){
    // 		case "add":layer.msg(id);break;
    // 		case "edit":layer.msg(id);break;
    // 		case "save":layer.msg(id);break;
    // 		case "back":layer.msg(id);break;
    // 		}
    // 		//还可以通过id获取innerText判断，jQuery不支持innerText
    // 		//var s = document.getElementById(id).innerText;
    // 		//alert(s);
    // 	});
    	
    	//用if语法动态添加按钮处理事件
    	$(".layui-btn").click(function(){
    		var id = $(this).attr('id');
    		if(id == "add"){
    			layer.msg(id);
    		} else if (id == "edit"){
    			layer.msg(id);
    		} else if (id == "save") {
    			layer.msg(id);
    		} else if (id == "back") {
    			layer.msg(id);
    		} 
    	});
     })

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201105210259425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2,size_16,color_FFFFFF,t_70