Attribut Wert geben undefined, wenn dies in Foreach

Question

Ich habe einige Felder mit einem benutzerdefinierten Attribut default. Wenn ich auf eine Schaltfläche mit der ID reset klicke, möchte ich den Wert aller Felder mit der Klasse afield auf den Standardwert ändern.

Beispielfelder sind,

<input type="text" class="afield" id="field1" default="10" value="10" /> 
<input type="text" class="afield" id="field2" default="20" value="20" /> 

folgenden Code Alle Felder Wert undefined ändert,

$(document).on('click', '#reset', function(event){ 
    event.preventDefault(); 
    var afields = $('.afield') 
    $.each(afields ,function(){ 
     this.value = this['default']; 
    }); 
}); 

Aber wenn ich die id verwenden, das Element zu erhalten und den Wert zu ändern, es funktioniert. Code folgt,

$(document).on('click', '#reset', function(event){ 
    event.preventDefault(); 
    var afields = $('.afield') 
    $.each(afields ,function(){ 
     var ele = $('#'+this.id) 
     var defaultval = ele.attr('default') 
     ele.val(defaultval) 
    }); 
}); 

Warum der erste Ansatz undefined als Standardwert gibt? Gibt es eine Möglichkeit, this Objekt innerhalb Schleife zu verwenden und dies zu erreichen?

Answer 1

Die Sache ist die, dass "dies" in jQuery jedes HTML-Element ist, so benutzerdefinierte attribute Wert abzurufen, sollten Sie Ihr Beispiel umschreiben zu:

$(document).on('click', '#reset', function(event){ 
    event.preventDefault(); 
    var afields = $('.afield') 
    $.each(afields ,function(){ 
     this.value = this.attributes.default.value; 
    }); 
}); 

Wieder einmal die Dokumentation prüfen (HTML DOM Element attributes)

oder da Sie jQuery verwenden, können Sie Dinge nicht zu kompliziert machen, und verwenden Sie einfach

Answer 2

Versuchen Sie mit dem folgenden Arbeitsausschnitt.

$(document).on('click', '#reset', function(event){ 
 
    event.preventDefault(); 
 
    var afields = $('.afield') 
 
    $.each(afields ,function(){ 
 
     this.value = $(this).attr("default"); 
 
    }); 
 
});

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="afield" id="field1" default="10" /> 
 
<input type="text" class="afield" id="field2" default="20" /> 
 
<input type="button" id="reset" value ="Reset"/>