如何从 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

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

到目前为止，一切都很好。

事情有点不对劲的地方在你的循环中。您正在遍历每个现有的迷你标签 span 元素，但您正在根据用户输入的值测试整个元素。您需要仅针对第一个文本节点进行测试，否则您将永远无法获得匹配项。

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

我们能做的是记住我们是否有匹配项，在有匹配项时跳出循环，如果没有匹配项则附加迷你标签 span。

查看此代码段和代码中的注释。

顺便说一句，要注意的一件事是，如果您的用户在您的输入元素中键入了一些讨厌的代码，您将其放入 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>