jQuery .data() arbeitet nicht mit $ (this)

Question

Ich möchte die ursprünglichen Daten meiner input Felder speichern (um später gegen diese Anfangswerte überprüfen zu können). Daher verwende ich den folgenden Code-Schnipsel, wenn meine Seite geladen wird:

$(document).ready(function() { 
    $('input').data('initial-value', $(this).val()) 
} 

Das Problem ist, dass die oben nicht den Anfangswert des in einem Datenattribut input Feld initial-value speichert. Das Attribut wird nicht erstellt.

Die folgende funktioniert:

$('input').data('initial-value', 'whatever value') 

Kann ich nicht den jQuery $(this) Operator innerhalb der .data() Methode verwenden? Wenn ja, was könnte ich sonst tun?

Answer 1

Sie werden einige Iteration dafür brauchen, und .each gesetzt auch die richtige this Referenz für Sie:

$('input').each(function() { 
    $.data(this, 'initial-value', this.value); 
}); 

Fiddle

ich verwendet habe, die statische $.data Methode, die eine bessere Leistung bietet, aber Sie können auch $(this).data('initial-value', this.value) verwenden.

Auch this.value tun gut und bietet eine deutlich bessere Leistung als $(this).val() - der Nachteil ist, wenn Sie select Element mit dem multiple Eigenschaft haben, für die .val() ein Array mit den ausgewählten Werten zurückkehrt, während .value nur den ersten Wert zurückgibt.

---

Obwohl, können Sie den Anfangswert durch das defaultValue Eigenschaft des Elements erhalten. Z.B .:

console.log($('input')[0].defaultValue); 

Fiddle

Beachten Sie, dass dieser Ansatz für nicht select Elemente funktionieren. Dies würde erfordern, über die Elemente option des Selects zu iterieren und ihre defaultSelected Eigenschaft zu überprüfen, aber in diesem Fall ist es einfacher, mit der früheren Lösung zu gehen.

Answer 2

In diesem Fall bezieht sich this auf das globale Objekt, da kein Kontext vorhanden ist.

Außerdem brauchen Sie das nicht. Nur .attr("value") geben Sie den Anfangswert;)

Answer 3

Wie wäre es so etwas für den Anfang

$('input').each(function(){$(this).data('initial-value',$(this).val());}) 

Answer 4

, der Code, den Sie nicht, weil this vorgesehen funktioniert bezieht sich auf document anstelle des input Element.Sie müßten Ihren Code aktualisieren, um zu sein:

jQuery(function ($) { //aliasing document.ready shortcut, good practice 
    "use strict"; 
    $('input').data('initial-value', $('input').val()); 
}); 

Natürlich, die wahrscheinlich nicht tun, was Sie wollen entweder, wie es jedes Eingabeelement gesetzt wird, den Anfangswert der zuerst zu speichern, Eingabeelement (.val() gibt den Wert des ersten übereinstimmenden Elements zurück).

Also den Code zu aktualisieren, für jedes Element zu arbeiten, dann würden Sie verwenden:

jQuery(function ($) { 
    "use strict"; 
    $('input').each(function() { 
     $(this).data('initial-value', $(this).val()); 
    }); 
}); 

Aber dann müssen wir auf die Frage bekommen, warum Sie stört den Anfangswert des Elements zu speichern, an erster Stelle. Wenn jemand den Wert des Eingangselements mit $(someElement).val('new value'); ändert, kann die Eingabe, indem Sie seinen Wert zurückgesetzt werden, zurück zu ihm ist [value] Attribut:

$(someElement).val($(someElement).attr('value')); 

Wenn auf der anderen Seite, werden Sie den Wert der input Einstellung Element mit $(someElement).attr('value', 'new value');, machst du es falsch, und korrumpieren Ihre input Zustand des Elements. reset Schaltflächen basieren auf dem [value]-Attribut, das den ursprünglichen Status beibehält, sodass beim Zurücksetzen eines form die Eingänge in ihren ursprünglichen Zustand zurückversetzt werden können.

Sie auch erwähnt:

Das Problem ist, dass die oben nicht den Anfangswert des in einem Datenattribut input Feld initial-value speichert. Das Attribut wird nicht erstellt.

Wenn Sie .data() verwenden ein Element für den Zugriff auf die Daten, wird es Informationen aus [data-*] Attribute ziehen, wenn [data-*] Attribute vorhanden sind. Dies ist ideal zum Initialisieren von Daten zu einem Element.

Wenn Sie .data(key, value) verwenden, um Daten mit einem Element zu verknüpfen, wird der Wert als Eigenschaft für das Element gespeichert. Der Wert des Attributs wird nicht aktualisiert. Es gibt keine Möglichkeit, instanziierte Objekte wie new Foo seriell zu deserialisieren, wie es ursprünglich war.

Wenn Sie überprüfen möchten, ob die Daten eines Objekts korrekt festgelegt wurden, können Sie nicht einfach den DOM-Inspektor verwenden. Sie müssen den Inhalt von .data() für dieses bestimmte Element überprüfen.

For more information about the differences between .attr() and .data(), see my answer to this related question.

Answer 5

Dies funktioniert nicht wirklich 100%. Was Sie auch tun müssen, ist zu überprüfen, ob Ihr Formular tatsächlich verwendet Eingabe oder Radio Boxen oder nicht.

Schauen Sie sich diese Lösung:

$(':input').each(function() { 
    $(this).data('initialValue', getValueForElement($(this))); 
}); 

fuunction getValueForElement(oObj) { 
    var sValue = oObj.val(); 
    if (oObj.is(":checkbox") || oObj.is(":radio")) { 
     sValue = oObj.is(":checked") ? oObj.val() : ' '; 
    } 
    return sValue; 
}