
这是一款基于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>










暂无评论内容