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

jQuery自定义添加或删除标签获取ID代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-06-17
这是一款基于layui的jQuery自定义添加或删除标签获取ID代码,可点击展开标签库和收起标签库,选择多个文字标签,已选中的标签会变成不可选状态。

上海快3开奖号码今天 www.y44gu.cn

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>

  • 墨西哥地震与球队进球民众跳跃啥关系?专家:无关 2018-07-14
  • 视频:16小时长效持妆 测YSL墨水气垫限量版 2018-07-14
  • 城口修齐镇开展污水处理厂(站)运行管理工作检查 2018-07-13
  • 做强茶企 告别“大而不强” 2018-07-13
  • 【理上网来辉煌十九大】美国学者关注十九大报告:中国将形成新的共识继续推进改革 2018-07-12
  • 丰瑞祥亮相全球互联网经济大会 探索大数据下金融支付的发展方向 2018-07-11
  • “青城纵马” 2018呼和浩特马拉松7月8日纵情开跑 2018-07-11
  • 收益走高 2018年银行理财产品怎么买? 2018-07-10
  • 粽香传真情 军民一家亲 2018-07-09
  • 江西省第33届“爱鸟周”正式启动 2018-07-08
  • 传媒每周热闻第357期:人民日报社与雄安新区共建文化传媒平台 2018网络媒体新春走基层主题活动启动 2018-07-08
  • 习近平为传统文化“代言” 2018-07-07
  • 陕西特殊药品实现医院备案 2018-07-06
  • 青海:52个客运站卫生间将全面改造 2018-07-06
  • 287| 86| 126| 42| 417| 836| 610| 436| 450| 971|