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

jQuery自定义添加或删除标签获取ID代码-精品资源网
jQuery自定义添加或删除标签获取ID代码
此内容为免费资源,请登录后查看
0
免费资源

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

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

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容