2016-04-13 7 views
0

Ich habe den folgenden Code, der richtig funktioniert, um eine Erfolgsspanne nach einem Eingabefeld einzufügen, wenn ein korrekter Wert eingegeben wird. Aber mein Problem ist, dass es jedes Mal, wenn ich das Feld verlasse, die Spanne hinzufügt. Aus Frage Jquery insertAfter only once if element exist Ich weiß, dass ich die ID der Spanne bei der Erstellung festlegen konnte und überprüfen Sie die Länge jedes Mal, wenn das Ereignis ausgelöst wird, um zu sehen, ob es bereits vorhanden ist. Aber ich bin mir nicht sicher, wie das geht, wenn ich eine Klasse zur Auswahl der Felder verwende.jQuery .insertAfter nur einmal mit einem Klassenselektor

Jede Hilfe mit Klassenselektoren wäre hilfreich.

$(".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(); 
    } 
}); 
+0

check '$ (this) .val(). Length' in if-Bedingung – uzaif

+0

Eine andere Möglichkeit besteht darin, zu speichern, ob die Erfolgsspanne dem Element mit der Klasse .systemFieldName bereits als Attribut hinzugefügt wurde oder nicht. Das ist: '$ (this) .attr ('correct', 1)' zum Setzen und 'if ($ (this) .attr (' correct ') == 1)' zum Überprüfen. – Tomasito665

+0

Sie sollten ein Änderungsereignis anstelle einer Unschärfe binden. – DinoMyte

Antwort

1

Dies sollte helfen.

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/

Dies prüft das nächste Element, um sicherzustellen, eine Spanne ist, es enthält auch eine Funktion remove, dass, wenn der Wert auf später geändert wird, wird es die gültige Spanne entfernen, aber nur, wenn die Das nächste Element ist bereits eine gültige Zeitspanne.

Verwenden Sie 121 oder testen Sie als Test in der jsFiddle.

+0

Funktioniert perfekt. Danke für das Hinzufügen der Entfernung auch. Sehr hilfreich. – JoBaxter

1

diese Geige Versuchen: https://jsfiddle.net/8jpc74z8/

Alles, was ich hier tue, ist zu prüfen, ob es ein Bruder des systemFieldName ist bereits hinzugefügt. Wenn nicht, dann füge hinzu.

if($(".systemFieldName +.label-success").length === 0){ 
+0

Sie müssen nicht nach systemFieldName und label-success.label suchen - Erfolg würde den Job erledigen. Als Empfehlung verwenden Sie ebenfalls das .change-Ereignis anstelle der Unschärfe. Sie müssen auch das Element mit der Bedingung entfernen, die nicht erfüllt ist (derzeit in Ihrem Code fehlt). Hier ist ein Beispiel: https://jsfiddle.net/DinoMyte/8jpc74z8/1/ – DinoMyte

+0

Nein. In realen Szenarien könnte er mehrere Eingabefelder mit derselben Klasse haben und gerne ein Erfolgsdiv daneben hinzufügen. Und in Bezug auf die Bedingung nicht erfüllt hat OP nicht darum gebeten. – Ash