javascript - jQuery .insertAfter 仅使用类选择器一次

Question

我有以下代码，可以正常工作，在输入正确的值时在输入字段后插入成功范围。但我的问题是，每次我离开球场时，它都会增加跨度。来自问题Jquery insertAfter only once if element exist我知道我可以在创建时设置跨度的 ID，并在每次事件触发时检查长度以查看它是否已经存在。但我不确定在使用类选择字段时如何做到这一点。

任何有关类选择器的帮助都会有所帮助。

$(".systemFieldName").blur(function(){
          var val = $(this).val();
          var exists = $.inArray(val,allFields);  
    if (val!="" && exists>=0){
      $("<span class='label label-success'>Valid</span>").insertAfter(this).one();
    } 
});

Answer 1

这应该有帮助。

allFields=["121",'test'];
$(".systemFieldName").blur(function(){
          var val = $(this).val();
          var exists = $.inArray(val,allFields);
          //See if the next element is a span with class label.
          var nextEl=$(this).next(); //next element
          var add=true; //add by default 
          if(nextEl.hasClass('label-success')) add=false; //don't add.

    if (val!="" && exists>=0 && add){ //only insert if all conditions are true.

      $("<span class='label label-success'>Valid</span>").insertAfter(this).one();
    }else if((val == "" || exists < 0) && !add) { // The !add means there is already the Valid span, we can safely remove nextEl, if the value changes.

      nextEl.remove();
    } 
});

https://jsfiddle.net/ym66f48p/2/

这会检查以确保下一个元素是一个范围，它还包括一个删除函数，如果稍后更改值，它将删除有效范围，但仅当下一个元素已经是有效范围时。

使用 121 或 test 作为 jsFiddle 中的测试。