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