如何从 span 中获取每个值并使用 js 或 jquery 将所有值设置为变量？ [关闭]

Question

我想在添加任何单词之前将标签列表检查到 div 中以不通过 jquery 重复任何单词

$('.addTag').on('keyup',function(e){
var inputTag = e.keyCode || e.which;
var spanValues = document.getElementsByClassName('mini-tag');
var thisValue = $(this).val().slice(0,-1);
console.log(spanValues)
if(inputTag === 188){
  for(i=0;i<spanValues.length;i++){
    if(thisValue === spanValues[i]){
      $('.addTag').val('')
    }else{
      $('.tags').append("<span class='mini-tag'>" +  thisValue + 
       "<i class='fas fa-times fa-xs'></i>" + " "  + "</span>");
      $(this).val('');} 
    }
  }
})

Answer 1

每次用户释放一个键时，您都会查看它，然后如果它是终止字符（您选择了小于号/左尖括号），您会得到他们输入的整个字符串，减去终止字符。

到目前为止一切顺利。

事情有点出问题的地方在于你的循环。您正在逐步检查每个现有的 mini-tag span 元素，但您正在根据用户输入的值测试整个元素。您需要仅针对第一个文本节点进行测试，否则您将永远无法获得匹配。

另外，当没有迷你标签元素时，一开始会发生什么？长度将为 0，因此您永远不会进入循环 - 您永远不会开始。

我们可以做的是记住我们是否有匹配，当你有匹配时打破你的循环，然后如果我们没有匹配，则附加迷你标签跨度。

看看这个sn-p和代码中的cmets。

顺便说一句，需要注意的一件事是，如果您的用户在您的输入元素中输入了一些讨厌的代码，您将其放入 DOM 中，这可能很危险。由于您在谈论标签，因此您可能希望丢弃任何不是字母数字的字符，但这取决于您的用例。

$('.addTag').on('keyup',function(e){
var inputTag = e.keyCode || e.which;
if (inputTag === 188) {
var spanValues = document.getElementsByClassName('mini-tag');
var thisValue = $(this).val().slice(0,-1);
console.log(spanValues)

//We just want to see if we have got a match
//We havent got one yet so let's remember that
let gotMatch = false;

//then go through testing the latest tag input against all those we already have to see if there is a match

  for(i=0;i<spanValues.length;i++){
    if(thisValue === spanValues[i].firstChild.nodeValue){
     gotMatch = true;
     break; //once we've got a match we know we don't want to carry on looking through the existing tags so get out of the for loop
    }
  }
    
    //now we have been through all the exising tags
    //we append a span element with the tag (and some fancy fontawesome)into the tags div
    
    if (!gotMatch) {
      $('.tags').append("<span class='mini-tag'>" +  thisValue + 
       "<i class='fas fa-times fa-xs'></i>" + " "  + "</span>"); 
       
    }
    $(this).val(''); //and whether we got a match or not we want to clear the input element so the user can type in another tag
}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="addTag" type="text"/>
<div class="tags"></div>