layui实际应用中批量button点击事件的正确添加及处理方式
给出两种批量按钮事件添加及处理方法
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>
<!-- layui两种js引用方法,一种是模块和回调函数单独放在外部js文件下
第二种是直接写在 js代码中,建议单独用文件存放js,方便业务分离
-->
<!--外部js文件 -->
<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);
}
});
})
效果:
本文来自博客园,作者:IT情深,转载请注明原文链接:https://www.cnblogs.com/wh445306/p/16751766.html