用jquery实现简易版标签的增删改查

第一步放几个盒子，应该用来编辑标签，一个用来显示可选标签

    

    
      

      

        
        
      
    
    
    

      aaa
      bbb
      ccc
    
    获取标签
  

第二步，写css样式（我这个简易版的就随便写写，需要的可以自定义好看的样式）

    * {
      padding: 0;
      margin: 0;
    }
    ul {
      list-style: none;
    }
    .cont {
      width: 500px;
      height: 400px;
      margin: auto;
      text-align: center;
      border: 1px solid #ccc;
    }
    .addLabel {
      margin: auto;
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: flex;
      flex-wrap: wrap;
      min-height: 34px;
      margin-bottom: 20px;
    }
    .addlabelText {
      display: flex;
    }
    .addLabel:hover {
      cursor: text;
    }
    em {
      font-style: normal;
    }
    .addList {
      font-size: 12px;
      color: #777;
      margin: 0 3px;
      line-height: 1.5;
    }
    .addList span {
      display: inline-block;
      line-height: 2.5;
    }
    .addList em {
      cursor: pointer;
      margin-left: 2px;
    }
    .allLabel {
      margin: auto;
      margin-bottom: 10px;
    }
    .addTag {
      color: #4e72b8;
      background-color: #fff;
      border: 1px solid #4e72b8;
      padding: 2px 12px;
      font-size: 12px;
      border-radius: 12px;
      line-height: 24px;
    }
    input {
      width: 40px;
      height: 100%;
      border: none;
    }
    input:focus {
      outline: none;
    }

第三步就是引入jquery了

第四步jquery实现

先定义两个数组

var lookList = [];//存储选择标签数组
 var seeList = ['1', '2', '3'];//已有标签数组

初步渲染到页面中存储已选标签的盒子

function see() {
    var text = '';
    seeList.forEach(item => {
      text += '
' + item + 'x,
';
      // 在这把数据存储到另一个数组
      lookList.push(item);
      lookList.join('.');
    });
    $('.addlabelText').append(text);
  }
  see()

点击已有标签到已选标签中

$('.addTag').on('click', function () {
    console.log();
    var text = $(this).text()
    var addtext = '
' + text + 'x,
';
    $('.addlabelText').append(addtext);
    lookList.push(text);
    lookList.join('.');
  })

点击已选标签的盒子，让input处于激活可编辑状态，实现可输入自定义标签

$('.addLabel').on('click', function () {
    $('input').focus();
    $('.addLabel').css({
      'border': '1px solid #66afe9',
      'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)'
    })
  })

把自定义标签添加到已选标签

$('input').on('blur', function () {
    $('.addLabel').css({
      'border': '1px solid #ddd',
      'box-shadow': 'none'
    })
    var inputText = $('input').val();
    // 判断输入值不为空时添加标签
    if (inputText !== '') {
      var addtext = '
' + inputText + 'x,
';
      $('.addlabelText').append(addtext);
      $('input').val('');
      lookList.push(inputText);
      lookList.join('.');
    }
  })

点击标签后面的删除可删除标签

function removeList(add) {
    var textList = $(add).prev().text()
    $(add).parents('.addList').remove();
    lookList.splice($.inArray(textList, lookList), 1)
    seeList.splice($.inArray(textList, seeList), 1)
    console.log(lookList)
  }

最后点击按钮查看已选标签

$('button').on('click', function () {
    console.log(lookList)
  })

控制台输入结果

完整代码

  
  
  
  
  



 


  

    

      
      

      

        
        
      
    
    
    

      aaa
      bbb
      ccc
    
    获取标签