Question

我不想重复要在字段中写入的标签，但是控制台在图像中出现了跨度值重复这样的图像，我该如何解决这一问题而不重复标签。我用过JQuery

s://i.stack.imgur.com/dIVP1.jpg

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input class="add-tags" type="text" placeholder="Type Your Tags">
  <div class="tags"></div>
</div>

<script>
  $('.add-tags').on('keyup', function(e) {
    var tagsKey = e.keyCode || e.which;
    if (tagsKey === 188) {
      var thisValue = $(this).val().slice(0, -1); //remove last letter
      $('.tags').append('<span class="tags-span"><i class="fa fa-times"></i>' + thisValue + '</span>');
      var spanvalue = $('.tags-span').text();
      console.log(spanvalue);

      if (thisValue === spanvalue) {
        console.log('good');
      } else {
        console.log('bad');
      }
      $(this).val('');
    }

    $('.tags').on('click', '.tags-span i', function() {
      $(this).parent('.tags-span').remove();
    });
  });
</script>

Answer 1

Voila！

我有一份礼物要送给您，但首先我想指出，下次您应该花更多的时间准备问题。不要哭，不要乞求，首先要做功课，并获得尽可能多的信息。 Stackoverflow并不是人们会为您工作的地方。

现在，人们只能猜测您真正想要达到的目标。

经过严格的处理后，让我们去看看好地方：

在以下示例（https://jsfiddle.net/mkbctrlll/xb6ar2n1/95/）中我做了一个简单的输入，在SPACE按键上创建了一个标签。如果单击X，则可以轻松删除每个标签。

HTML：

<form class="wrapper">
  <label for="test">
    <span id="tags">
      Tags:
    </span>
    <input id="test" type="text" >
  </label>
</form>

JS：


var tagsCollection = []

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        var content = getContent('#test')

                console.log(tagsCollection.indexOf(content))

        if(tagsCollection.indexOf(content) === -1) {
            console.log('Spacebar hit! Creating tag')

            createTag(content)
          tagsCollection.push(content)
          console.log(tagsCollection)
        } else {
            console.log('We already have this one sir!')

          displayError('Whoops! Looks like this tag already exists... )')
        }
    }
}

$('.wrapper').on('click', function(event) {
    $(event.target).closest('.tag').remove()
})

function displayError(content) {
    var error = document.createElement('p')

  error.classList.add('error')
  error.innerHTML = content
  document.querySelector('.wrapper').append(error)
}

function getContent(target) {
    var value = $(target).val().replace(/\W/g, '')
  $(target).val("")

    return value
}

function createTag(content) {
    var $tags = $('#tags')
    var tag = document.createElement('span')
  var closeIcon = '&times;'
  var iconHTML = document.createElement('span')

  iconHTML.classList.add('remove')
  iconHTML.innerHTML = closeIcon

  tag.classList.add('tag')
  tag.append(iconHTML)
  tag.append(content)
  $tags.append(tag)
}

function removeTag(target) {
    target.remove()
}

CSS：

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

#tags {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

#test {
  display: block;
  width: 100%;
}

.tag {
  border-radius: 16px;
  background-color: #ccc;
  color: white;
  font-size: 12px;
  padding: 4px 6px 4px 16px;
  position: relative;
}

.tag:not(:last-child) {
  margin-right: 4px;
}

.remove {
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 6px;
  cursor: pointer;

  transform: translateY(-50%);
}

.remove:hover {
  color: red;
}

这只是一个简单而肮脏的示例，而不是生产lvl代码。

为什么在JQuery中追加在跨度中重复？我不想重复标签

1 个答案: