jQuery .data() non funziona con $ (this)

Question

Voglio memorizzare i dati iniziali dei miei input campi (per essere in grado di controllare contro questi valori iniziali in seguito). Pertanto, io uso il seguente frammento di codice quando i miei pagina viene caricata:

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

Il problema è che quanto sopra non memorizza il valore iniziale del campo input in un attributo di dati initial-value. L'attributo non è stato creato.

quanto segue funziona:

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

non riesco ad utilizzare l'operatore jQuery $(this) all'interno del metodo .data()? Se sì, cos'altro potrei fare?

Answer 1

avrete bisogno di alcune iterazioni per questo, e .each sarà anche impostare la corretta this riferimento per voi:

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

Fiddle

ho usato il metodo statico $.data che offre prestazioni migliori, ma è possibile utilizzare anche $(this).data('initial-value', this.value).

Inoltre, this.value farà bene e fornisce prestazioni molto migliori rispetto $(this).val() - lo svantaggio è quando si ha select elemento con la proprietà per la quale multiple.val() restituisce un array con i valori selezionati, mentre .value restituisce solo il primo valore.

---

però, è possibile ottenere il valore iniziale attraverso la proprietà dell'elemento defaultValue. Es .:

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

Fiddle

Si noti che questo approccio non funziona per select elementi. Ciò richiederebbe la iterazione degli elementi option della selezione e il controllo della loro proprietà defaultSelected, ma in tal caso è più semplice utilizzare la soluzione precedente.

Answer 2

In questo caso, this fa riferimento all'oggetto globale poiché non v'è alcun contesto.

Inoltre, non è necessario. Basta .attr("value") vi darà il valore iniziale;)

Answer 3

Che ne dite di qualcosa di simile

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

Answer 4

Per cominciare, il codice che hai fornito non funzionerà perché si riferisce a thisdocument invece dell'elemento input.Avresti bisogno di aggiornare il codice per essere:

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

Naturalmente, che probabilmente non fare quello che vuoi o, come si imposterà ogni elemento ingresso per memorizzare il valore iniziale del prima L'elemento di input (.val() restituisce il valore del primo elemento con corrispondenza).

Quindi, per aggiornare il codice di lavorare per ogni elemento, utilizza:

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

Ma poi abbiamo bisogno di entrare nella questione del perché si sta preoccuparsi di memorizzare il valore iniziale dell'elemento innanzitutto. Se qualcuno cambia il valore dell'elemento di input con $(someElement).val('new value');, l'ingresso può essere azzerato impostando il suo valore di nuovo esso è [value] attributo:

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

Se, d'altra parte, si sta impostando il valore della input elemento con $(someElement).attr('value', 'new value');, stai sbagliando e stai corrompendo lo stato dell'elemento input. I pulsanti reset si basano sull'attributo [value] preservando lo stato originale in modo che quando viene ripristinato uno form, gli input possano essere riportati allo stato originale.

È inoltre menzionati:

Il problema è che quanto sopra non memorizzare il valore iniziale del campo input in un attributo di dati initial-value. L'attributo non è stato creato.

Quando si utilizza .data() per accedere ai dati su un elemento, tirerà le informazioni da [data-*] attributi se [data-*] attributi sono presenti. Questo è ottimo per inizializzare i dati su un elemento.

Quando si utilizza .data(key, value) per associare i dati con un elemento, sarà memorizzare il valore come una proprietà sull'elemento; Non aggiornerà il valore dell'attributo. Non esiste un modo per serializzare oggetti istanziati come new Foo in modo che possa essere deserializzato nel modo in cui era originariamente.

Se si desidera verificare che i dati di un oggetto siano stati impostati correttamente, non è possibile utilizzare semplicemente l'ispettore DOM, è necessario verificare effettivamente il contenuto di .data() per quel particolare elemento.

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

Answer 5

Questo non funziona al 100%. Quello che dovete fare pure è quello di verificare se il modulo utilizza acutally ingresso o Radio scatole o meno.

di verificare questa soluzione:

$(':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; 
}