[PHP] JQuery+Layer实现添加删除自定义标签代码
JQuery+Layer实现添加删除自定义标签代码
实现效果如下：
实现代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>实用的文章自定义标签</title> <link rel="stylesheet" type="text/css" href="css/layui.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <style type="text/css"> </style> </head> <body> <div class="wrap"> <div id="tagValue" class="label-selected"> </div> <div style="float:left;width:100%"> <a class="layui-btn layui-btn-normal labela show-labelitem" style="margin-left:0px; display: block;border-radius: 6px; ">展开标签库 </a> <a class="layui-btn layui-btn-normal labela hide-labelitem" style="margin-left:0px; display: none;border-radius: 6px; ">收起标签库 </a> </div> <div class="layui-col-md12" id="labelItem" > <!--标签库--> <div class="label-item" style="border-radius:6px;"> <li data="1"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>1</span></li> <li data="2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>2</span></li> <li data="3"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>3</span></li> <li data="4"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>4</span></li> <li data="5"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>5</span></li> <li data="6"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>6</span></li> <li data="7"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>7</span></li> <li data="8"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>8</span></li> <li data="9"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>9</span></li> </div> </div> <!-- 前两个用于向后台提交数据 后3个用于页面判断 --> <!-- 从标签库里选择的标签ID 1--> <!--仅从标签库选择，仅ID--> <!-- <label>从标签库里选择的标签ID :</label> --> <div style="margin:15px;display:none;"><input name="imagelabels" id="imagelabels" style="width:300px"></input></div> <!-- 新增的自定义标签文字 2--> <!--2、3、4 都是文字，且有对应顺序的数组--> <!-- <label>新增的自定义标签文字 :</label> --> <div style="margin:15px;display:none"><input name="newtext" style="width:300px"></input></div> <!-- 所有已经选择的标签文字 3--> <!-- <label>所有已经选择的标签文字 :</label> --> <div style="margin:15px;display:none"><input name="selectedtext" style="width:300px"></input></div> <!-- 所有标签库里的标签文字 4--> <!-- <label>所有标签库里的标签文字 :</label> --> <div style="margin:15px;display:none"><input name="existedtext" style="width:300px"></input></div> <div class="add-label" style="display:inline-block"> <label style="font-weight:normal;">添加标签 :</label> <input type="text" id="labelName" class="form-control" style="width:200px;display:inline-block;border-radius:6px; " placeholder="请输入标签名"> <a id="label-self" class="layui-btn layui-btn-normal" style="border-radius:6px;"><span class="glyphicon glyphicon-plus glyphicon glyphicon-plus glyphicon-plus-button" aria-hidden="true"></span>添加标签 </a> <a class="layui-btn layui-btn-normal" style="width:200px;margin-top:30px;margin-left:100px;" onclick="submit()">提交</a> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/layer.js"></script> <script type="text/javascript"> /******************************** Part 01 初始化开始**********************************/ //定义全局变量--数组 var newText = new Array(); var selectedText = new Array(); var existedText = new Array(); $(function(){ $(".show-labelitem").on("click",function(){ $(this).hide(); $(".hide-labelitem").show(); $("#labelItem").show(); }); $(".hide-labelitem").on("click",function(){ $(this).hide(); $(".show-labelitem").show(); $("#labelItem").hide(); }); $("input[name='imagelabels']").val(''); //已经选择的标签ID $("input[name='newtext']").val(''); //新建的标签文本，要存入数据库的 $("input[name='selectedtext']").val(''); $("input[name='existedtext']").val(''); //给标签库里的标签添加点击事件 $(".label-item").on("click","li",function(){ var id = $(this).attr("data"); var text = $(this).children("span:nth-child(2)").html(); if($(this).hasClass("selected")){ return false; } if(addLabel(id,text)){ //添加，并要把标签库里相应的标签设置为已选择 $(this).addClass("selected"); } }); //初始化4 resetExistedText(); }) /********************************初始化结束**********************************/ /******************************************** Part 02 设置数组和input**********************************************************/ function resetDataValue(){ /******1*****直接从最上面生成**/ val = ''; for(var i = 0; i < $(".label-selected").children("li").length; i++){ var data = $(".label-selected").children("li").eq(i).attr("data"); if(data!="0"){ //只存储通过标签库添加的 ID，新增的自定义标签 data 为 0 ********* val += data+','; } } $("input[name='imagelabels']").val(val); } //2、3、4：数据同时存到 数组 和 input。数组：方便检索；input：方便观察 数组和文字，顺序一致 function addNewText(labelName){ /*****2+***文字，数组 各自增****/ valtext = $("input[name='newtext']").val();; valtext += labelName+','; $("input[name='newtext']").val(valtext); newText.push(labelName); } function removeNewText(labelName){ /******2-***数组————>文字****/ valtext = ''; var index = newText.indexOf(labelName); if(index !== -1) { newText.splice(index,1); } for(i=0;i<newText.length;i++) { valtext += newText[i]+','; } $("input[name='newtext']").val(valtext); } function resetSelectedText(){ /******3**根据 最上面 生成单独的数组和文字*****/ selectedText=[]; //首先要清空 valtext = ''; for(i=0;i<$(".label-selected").children("li").length;i++) { var text = $(".label-selected").children("li").eq(i).text(); selectedText[i]=text; valtext += selectedText[i]+','; } $("input[name='selectedtext']").val(valtext); } function resetExistedText(){ /******4**根据 标签库列表 生成单独的数组和文字*****/ existedText=[]; //首先要清空 valtext = ''; for(i=0;i<$(".label-item").children("li").length;i++) { var text = $(".label-item").children("li").eq(i).children("span:nth-child(2)").html(); existedText[i]=text; valtext += existedText[i]+','; } $("input[name='existedtext']").val(valtext); } /*********************************************设置数组和input结束*******************************************************/ /******************************************* Part 03 添加****************************************/ //添加自定义标签 $("#label-self").on("click",function(){ // 3情况：重复、标签库、新增 var labelName = $("#labelName").val(); if(labelName!=null&&labelName!=""){ var indexOfselected = selectedText.indexOf(labelName); var indexOfexisted = existedText.indexOf(labelName); if(indexOfselected !== -1) //已经存在于已选择，不添加 { tips("标签已存在！"); return; } else if(indexOfexisted !== -1) //已经存在于标签库，添加，并要把标签库里相应的标签设置为已选择 { var li = $(".label-item").children("li").eq(indexOfexisted); var id = li.attr("data"); if(addLabel(id,labelName)){ li.addClass("selected"); } return; } else { if(addLabel(0,labelName)) //新添加的标签，添加，并2+ { addNewText(labelName); } } } else{ tips("请填写标签名！"); } }); //添加标签到最上面 function addLabel(id,text){ var num=8; //标签最多个数 if($(".label-selected").children("li").length >= num){ tips("最多可以选择"+num+"个哦"); return false; } var labelHTML = getappendHTML(id,text); $(".label-selected").append(labelHTML); //新增，刷新 1、3 resetDataValue(); resetSelectedText(); return true; } /************************************************ Part 04 删除************************************/ //删除已选标签 $(".label-selected").on("click","li .delete",function(){ var id = $(this).parent().attr("data"); var text = $(this).parent().text(); //删除最上面 $(this).parent().remove(); //刷新 1、3 resetDataValue(); resetSelectedText(); if(id == 0){ //删除的是新增标签 2- removeNewText(text); } else{ //删除的是标签库里的标签 移除class $(".label-item").find("li[data='"+id+"']").removeClass("selected"); } }); /***************************************** Part 05 提交*******************************************/ function submit() { var labelID = $("input[name='imagelabels']").val(); var newtext = $("input[name='newtext']").val(); //保存到数据库 alert(labelID); alert(newtext); } /************************************************************************************/ function getappendHTML(id,text){ return "<li data='"+id+"''>"+text+"<div class='delete'></div></li>"; } function tips(content) { layer.open({ type: 1 , offset: 'auto', //具体配置参考：offset参数项 title : '提示', content: '<div style="padding: 20px 80px;">'+content+'</div>', btn: '确定', btnAlign: 'c', //按钮居中 yes:layer.closeAll() }); } </script> </body> </html>
参考：
http://www.17sucai.com/pins/30788.html
本博客地址： wukong1688
本文原文地址：https://www.cnblogs.com/wukong1688/p/11117864.html
转载请著名出处！谢谢~~
