Question

我正在制作标签系统，但我不知道如何防止用户向同一标签发送垃圾邮件。我唯一的想法是将每个添加到数组中。并且一旦他们再次单击它就不再添加它，但是我无法弄清楚。如果有人可以帮助，那就太好了！

这是我的代码示例：

<select multiple="multiple" size="10" id="tag_name">
   <option>apple</option>
   <option>pear</option>
   <option>pineapple</option>
   <option>peach</option>
   <option>strawberry</option>
   <option>raspberry</option>
   <option>cherry</option>
   <option>watermelon</option>
   <option>orange</option>
   <option>banana</option>
   <option>grape</option>
   <option>honeydew</option>
   <option>apricot</option>
</select>
<!-- appended tags wrapper -->
<div class="tags"></div>
<script type="text/javascript">
   var tag_count = 0;
   var tag_array = "";
   $("#tag_name").click(function(){
      var tag = $("#tag_name").val();
      if(!tag == ""){
         tag_array = tag_array+tag+", ";
         tag_count = tag_count+1;
         if(????){
            if(tag_count != 11){
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>"+tag+"</p><a href=\"#\">x</a></div>");
            } else {
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>15 tags already selected!</p><a href=\"#\">x</a></div>");
               $("#tag_name").attr("disabled","disabled");
            }
         }
      }
   });
</script>

Answer 1

String.indexOf()怎么样？

if (tag_count != 11 && -1 === tag_array.indexOf(tag)) {
  tag_array += tag + ", ";
  tag_count = ++;
  $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>" + tag + "</p><a href=\"#\">x</a></div>");
} else {
  ..
}

Answer 2

最简单的方法是在.tags的{{1}}事件上构建change的HTML。然后，您可以在每次更改时简单地重建整个列表。由于一个元素只能被选择一次，因此不能重复。试试这个：

select

$("#tag_name").change(function() {
  var values = $(this).val();
  if (values.length > 10) {
    $('.tags').html('<div class="tag"><p>15 tags already selected!</p><a href="#">x</a></div>');
  } else {
    var tagsHtml = values.map(function(v) {
      return '<div class="tag"><p>' + v + '</p><a href="#">x</a></div>';
    }).join('');
    $('.tags').html(tagsHtml);
  }
});

.tag {
  margin: 5px;
}

请注意使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple="multiple" size="10" id="tag_name"> <option>apple</option> <option>pear</option> <option>pineapple</option> <option>peach</option> <option>strawberry</option> <option>raspberry</option> <option>cherry</option> <option>watermelon</option> <option>orange</option> <option>banana</option> <option>grape</option> <option>honeydew</option> <option>apricot</option> </select> <div class="tags"></div>作为外部字符串定界符。这样就避免了将丑陋的转义符用于内部双引号。

Answer 3

您在那里没有Arrray，只有一个字符串在其中连接了新值。

但是您仍然可以使用.includes() here

一个更好的选择是使用一个数组，然后查看您尝试添加的值是否存在。

所以改变：

var tag_array = ""至var tag_array = [];

和

tag_array = tag_array+tag+", ";至tag_array.push(tag)；

然后，您可以执行tag_array.includes(tag)来查看标签是否在数组中。但是我建议您在将值插入数组之前进行检查，否则它将始终为真。 docs

如果以后需要逗号分隔的标签字符串，可以这样做

tag_array.join(', ');

Answer 4

您应该尝试使用Set而不是数组。这样，每个条目都是唯一的。

const set1 = new Set(["Apple", "Orange"]);
set1.add("Apple");
console.log(Array.from(set1));

Answer 5

以下代码将完成这项工作！

var tag_count = 0;
   var tag_array = [];
   $("#tag_name").click(function(){
      var tag = ""+$("#tag_name").val();
       if(!tag == ""){
        if(tag_array.indexOf(tag) < 0){
         tag_array.push(tag);
         tag_count = tag_count+1;
         console.log(tag_array);
            if(tag_count != 11){
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>"+tag+"</p><a href=\"#\">x</a></div>");
            } else {
               $(".tags").append("<div style=\"margin: 5px;\" class=\"tag\"><p>15 tags already selected!</p><a href=\"#\">x</a></div>");
               $("#tag_name").attr("disabled","disabled");
            }
         }else{
              console.log("Alredy Tagged - "+tag);
            }
      }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" size="10" id="tag_name">
   <option>apple</option>
   <option>pear</option>
   <option>pineapple</option>
   <option>peach</option>
   <option>strawberry</option>
   <option>raspberry</option>
   <option>cherry</option>
   <option>watermelon</option>
   <option>orange</option>
   <option>banana</option>
   <option>grape</option>
   <option>honeydew</option>
   <option>apricot</option>
</select>

Answer 6

for(i = 0; i< MyArray.length(); i++){
    for(j = 0; j< MyArray.length(); j++){
        if (i != j){
            if(new String(MyArray[i]).valueOf() == new String(MyArray[j]).valueOf()){
                return i;
            }
        }
    }
}

如果您知道它们是字符串，则无需检查类型。（MyArray[i]) == MyArray[j])）

如何检查数组是否包含多个相同单词之一

6 个答案: