这是一款基于layui的jQuery自定义添加或删除标签获取ID代码,可点击展开标签库和收起标签库,选择多个文字标签,已选中的标签会变成不可选状态。
js代码
<script type=\"text/javascript\" src=\"js/jquery.min.js\"></script> <script type=\"text/javascript\" src=\"js/layer.js\"></script> <script type=\"text/javascript\"> $(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(); }); $(\".label-item\").on(\"click\",\"li\",function(){ var id = $(this).attr(\"data\"); var text = $(this).children(\"span\").html(); var labelHTML = \"<li data=\'\"+id+\"\'\'>x \"+text+\"</li>\"; if($(this).hasClass(\"selected\")){ return false; }else if($(\".label-selected\").children(\"li\").length >= 8){ layer.msg(\"最多可以选择8个哦\"); return false; } $(\".label-selected\").append(labelHTML); val = \'\'; for(var i = 0; i < $(\".label-selected\").children(\"li\").length; i++){ val += $(\".label-selected\").children(\"li\").eq(i).attr(\"data\")+\',\'; } $(\"input[name=\'label\']\").val(val); $(this).addClass(\"selected\"); }); var val = \"\"; $(\".label-selected\").on(\"click\",\"li\",function(){ var id = $(this).attr(\"data\"); val = \'\'; $(this).remove(); for(var i = 0; i < $(\".label-selected\").children(\"li\").length; i++){ val += $(\".label-selected\").children(\"li\").eq(i).attr(\"data\")+\',\'; } $(\"input[name=\'label\']\").val(val); $(\".label-item\").find(\"li[data=\'\"+id+\"\']\").removeClass(\"selected\"); }); //点击更换标签 var limit = 0; $(\".replacelable\").on(\"click\",function(){ layer.load(1); limit += 32; $.ajax({ url:window.location.href, type:\"post\", datatype:\"json\", data:{ labellimit:limit }, success:function(data){ layer.closeAll(\'loading\'); $(\".label-item\").find(\"li\").remove(); var html = \'\'; for(var i in data){ html += \"<li data=\\\"\"+data[i].term_id+\"\\\">x<span>\"+data[i].name+\"</span></li>\";//拼接标签 } $(\".label-item\").append(html);//追加至文档 }, error:function(){ layer.closeAll(\'loading\'); layer.msg(\"错误~~~\"); } }) }) //获取标签 $(\"#cell\").on(\"click\",function(){ if($(\"input[name=\'label\']\").val() == \"\"){ return false; }else{ layer.msg(\"标签内容为:\"+$(\"input[name=\'label\']\").val()); } }) }) </script>
暂无评论内容