Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

作者/代码整理:  (转载请附加本文地址,带有“js原生”字样的谢绝转载) 发布日期:2018-06-17
这是一款基于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>