添加页面如何设置标签

//点击标签的操作
var biaoqian_array = [];
var theme =  ['fairy-bg-red', 'fairy-bg-orange', 'fairy-bg-green', 'fairy-bg-cyan', 'fairy-bg-blue', 'fairy-bg-black'];
var index = 0;
$(function(){
   var tagList = $("div.fairy-tag-container").eq(1).find("span#tag");
   console.log(tagList.size());
   index = 0;
   for(var i=0;i<tagList.size();i++){
      //var orderNo =  Math.floor(Math.random() * theme.length);
      $(tagList[i]).addClass(theme[index]); //设置标签颜色
      index++;
      if(index>=theme.length){
         index=0;
      }
      $(tagList[i]).on('click', function () {
         console.log($(this).text());//输出标签名称
         biaoqian_array.push($(this).text().trim());
         biaoqian_array = unique(biaoqian_array);
         console.log(biaoqian_array);
         init_tag();
      });
   }
});

//初始化 点击的标签
function  init_tag(){
   index = 0;
   $("#tag_list").empty();
   $("#tag_list").append("<span style=\"float: left\">已选标签：</span>");
   biaoqian_array.forEach((item)=>{
      $("#tag_list").append('<span id="tag" class="fairy-tag fairy-anim-fadein '+theme[index]+'"><span>'+item+'</span><a   title="删除标签">×</a></span>');
      index++;
      if(index>=theme.length){
         index=0;
      }
   });
   listen_del();
}
//监听删除按钮
function  listen_del(){
   var tagList = $("div.fairy-tag-container").eq(0).find("span#tag");
   console.log(tagList.size());
   for(var i=0;i<tagList.size();i++){
      $(tagList[i]).on('click', 'a', function () {
         console.log("删除");
         $(this).parent().remove();
         //删除数组。指定内容。
         var name = $(this).parent().text();
         name = name.trim();
         name = name.substring(0,name.length-1);
         console.log(name);
         removeByValue(biaoqian_array,name);
         console.log(biaoqian_array);
      });
      // this.elem.parent().on('click', 'a', function () {
   }
}



<div style="width: 400px;" class="layui-form-item layui-form-text">
   <label class="layui-form-label">标签</label>
   <div class="layui-input-block" style="border: 1px solid #eaeaea; ">
      <div id="tag_list" class="fairy-tag-container" style="overflow: hidden;">
         <span style="float: left">已选标签：</span>

      </div>

      <div class="fairy-tag-container" style="overflow: hidden;">
         <span style="float: left">点击选择标签：</span>
         <span style="cursor: pointer;" class="fairy-tag fairy-anim-fadein  " id="tag" th:each="tag : ${tagList}"><span th:text="${tag.name}"> </span> </span>
      </div>


   </div>
</div>


提交 表单 获取标签
console.log("标签："+biaoqian_array.join(","));

修改页面的标签设置问题。

//点击标签的操作 向biaoqian_array存数据
var biaoqian_array = [];//这里存 用户点击的标签
var theme =  ['fairy-bg-red', 'fairy-bg-orange', 'fairy-bg-green', 'fairy-bg-cyan', 'fairy-bg-blue', 'fairy-bg-black'];
var index = 0;
$(function(){
   var tagList = $("div.fairy-tag-container").eq(1).find("span#tag");
   console.log(tagList.size());
   index = 0;
   for(var i=0;i<tagList.size();i++){
      //var orderNo =  Math.floor(Math.random() * theme.length);
      $(tagList[i]).addClass(theme[index]);
      index++;
      if(index>=theme.length){
         index=0;
      }
      $(tagList[i]).on('click', function () {
         console.log($(this).text());//输出标签名称
         biaoqian_array.push($(this).text().trim());
         biaoqian_array = unique(biaoqian_array);
         console.log(biaoqian_array);
         init_tag();
      });
   }
});

//初始化 用户选择的标签biaoqian_array
function  init_tag(){
   index = 0;
   $("#tag_list").empty();
   $("#tag_list").append("<span style=\"float: left\">已选标签：</span>");
   biaoqian_array.forEach((item)=>{
      $("#tag_list").append('<span id="tag" class="fairy-tag fairy-anim-fadein '+theme[index]+'"><span>'+item+'</span><a   title="删除标签">×</a></span>');
      index++;
      if(index>=theme.length){
         index=0;
      }
   });
   listen_del();
}
//监听删除按钮
function  listen_del(){
   var tagList = $("div.fairy-tag-container").eq(0).find("span#tag");
   console.log(tagList.size());
   for(var i=0;i<tagList.size();i++){
      $(tagList[i]).on('click', 'a', function () {
         console.log("删除");
         $(this).parent().remove();
         //删除数组。指定内容。
         var name = $(this).parent().text();
         name = name.trim();
         name = name.substring(0,name.length-1);
         console.log(name);
         removeByValue(biaoqian_array,name);
         console.log(biaoqian_array);
      });
      // this.elem.parent().on('click', 'a', function () {
   }
}

//初始化 数据库存的标签
$(function(){
   var select_biaoqian_str = "[[${sales?.tag}]]";
   if(select_biaoqian_str.length==0){
   }else{
      biaoqian_array  = select_biaoqian_str.split(',');
   }
   init_tag();
});




<div style="width: 400px;" class="layui-form-item layui-form-text">
   <label class="layui-form-label">标签</label>
   <div class="layui-input-block" style="border: 1px solid #eaeaea; ">
      <div id="tag_list" class="fairy-tag-container" style="overflow: hidden;">
         <span style="float: left">已选标签：</span>

      </div>

      <div class="fairy-tag-container" style="overflow: hidden;">
         <span style="float: left">点击选择标签：</span>
         <span style="cursor: pointer;" class="fairy-tag fairy-anim-fadein  " id="tag" th:each="tag : ${tagList}"><span th:text="${tag.name}"> </span> </span>
      </div>


   </div>
</div>