Siehe Eltern Selektor ‚this‘ in jQuery

Question

Ich habe folgende jQuery-Code, der $.post

$("input[name='username']").blur(function() { 
    $("#usernm").html("<img src='css/assets/ajax-loader.gif' alt='Loading'/>"); 
    $.post("validate.jsp", { 
     fieldtype : $(this).attr("name"), 
     fieldval : $(this).val() 
    }, 
    function(resp) { 
     if(resp.trim()!="true") 
      $("input[name='username']").addClass("invalidvalue"); 
     else 
      $("input[name='username']").removeClass("invalidvalue"); 
     $("#usernm").html("&nbsp;"); 
    }) 
}); 

mit Benutzernamen meiner Anmeldeformular bestätigt und zur Zeit habe ich eine solche Verfahrensblöcke für jeden Eingang auf meine Form, die Ich validiere, was ich tun möchte ist, anstatt $("input[name='username']").addClass("invalidvalue"); zu verwenden Ich möchte etwas wie $(this) so verwenden, dass es auf die input[name='username'] zeigt, auch möchte ich nur einzelne Methode für jeden Eingang behalten, den ich validieren möchte, damit ich reduzieren kann mein JS-Code.

Wie geht das?

Answer 1

Für alle Eingabefelder validieren, könnten Sie so etwas wie folgt verwenden:

//Mapping of input elements and its 'loading' elements 
var inputMap = { 'username' : 'usernm' }; 

$("input").blur(function() { 
    var inputName = $(this).attr('name'); 
    var that = this; 

    $("#"+inputMap[inputName]).html("<img src='css/assets/ajax-loader.gif' alt='Loading'/>");  
    $.post("validate.jsp", { 
     fieldtype : inputName, 
     fieldval : $(this).val() 
    }, 
    function(resp) { 
     if(resp.trim()!="true") 
      $(that).addClass("invalidvalue"); 
     else 
      $(that).removeClass("invalidvalue"); 
     $("#"+inputMap[inputName]).html("&nbsp;"); 
    }) 
}); 

Answer 2

Diese leicht mit der Einrichtung einer Klasse auf die Elemente getan werden könnte, mit dieser Funktion haben wollen.

Machen Sie Ihre Eingabefelder wie folgt aus:

<input type="text" name="username" class="validate"> 
<input type="password" name="password" class="validate"> 

Die jQuery-Code

$(".validate").each(function(){ 
    $(this).blur(function(){ 
    var field = $(this); 
    field.addClass("loading"); //Make a class for loading behavior if possible 
    $.post(
     "validate.jsp", 
     { fieldtype:field.attr("name"), 
     fieldval :field.val() 
     }, 
     function(resp) { 
     field.removeClass("loading"); //see on top 
     if(resp.trim()!="true") { 
      field.addClass("invalidvalue"); 
     } 
     else { 
      field.removeClass("invalidvalue"); 
     } 
     } 
    }); 
}); 

Wenn Sie einige spezielle Variablen für einige Felder haben wollen Sie die HTML-Daten- * Typen verwenden können, und machen so etwas wie dieses:

<input name="username" class="validate" data-var="blabla"> 

und Sie den Wert dann mitverwenden können