2014-05-11 20 views
54

Nel mio html ho un elemento span:ottenere i dati degli attributi

<span class="field" data-fullText="This is a span element">This is a</span> 

E voglio ottenere l'attributo data-fullText. Ho provato questi due modi, ma non ha funzionato (entrambi ritorno undefined):

$('.field').hover(function() { 
    console.log('using prop(): ' + $(this).prop('data-fullText')); 
    console.log('using data(): ' + $(this).data('fullText')); 
}); 

Poi ho cercato e trovato queste domande: How to get the data-id attribute? e jquery can't get data attribute value.
Le risposte di entrambi sono "Use .attr('data-sth') or .data('sth')".
So che .attr() è deprecato (in jQuery-1.11.0, che utilizzo), ma, tuttavia, l'ho provato.
E ha funzionato!

Qualcuno può spiegare perché?

+1

'$ (this) .data ('full-text') 'funzionerà come gli attributi sono inferiori. In effetti, dovresti impostarlo come: 'data-fulltext' o' data-full-text'. Per il seguito, quindi: '$ (questo) .data ('fullText')' funzionerebbe, usando la sintassi del caso cammello –

+0

FYI, "Lo so.attr() è deprecato 'attr() non è deprecato, questo è il metodo da usare per impostare/ottenere attributo, non proprietà –

+0

Quindi cosa dovrei usare -' prop' o 'attr'? –

risposta

118

è possibile utilizzare la funzione .attr():

$(this).attr('data-fullText') 

o se si minuscolo il nome dell'attributo:

data-fulltext="This is a span element" 

allora si potrebbe utilizzare la funzione .data():

$(this).data('fulltext') 

La funzionesi aspetta e funziona solo con nomi di attributi in lettere minuscole.

+4

Ottimo, quindi tutto ciò che devi fare è il nome del tuo attributo in minuscolo perché quello è come funziona la funzione .data e come si aspetta che i tuoi attributi vengano nominati. –

+3

Grazie, funziona perfettamente! Non ho ora che 'data-' dovrebbe avere solo lettere minuscole :) –

+0

non sei il primo e non l'ultimo che è rimasto bloccato su dati non definiti a causa della limitazione minuscolo –

1

questo funziona per me

$('.someclass').click(function() { 
    $varName = $(this).data('fulltext'); 
    console.log($varName); 
}); 
0

Modificare gli ID e gli attributi dei dati che vuoi!

<select id="selectVehicle"> 
     <option value="1" data-year="2011">Mazda</option> 
     <option value="2" data-year="2015">Honda</option> 
     <option value="3" data-year="2008">Mercedes</option> 
     <option value="4" data-year="2005">Toyota</option> 
    </select> 

$("#selectVehicle").change(function() { 
    alert($(this).find(':selected').data("year")); 
}); 

Ecco l'esempio di lavoro: https://jsfiddle.net/ed5axgvk/1/

+0

La domanda riguardava gli attributi dei dati e nulla a che fare con selects o qualsiasi altra forma di input. –

+0

L'esempio riguardava anche gli attributi dei dati. Leggi di nuovo! – curiousBoy

+0

Oh, capisco. Forse sarebbe stato più chiaro se avessi illustrato la tua risposta con lo span statico nella domanda, piuttosto che usare un campo di input. Questo mi ha gettato. Scusate. –

0

Questo è ciò che mi si avvicinò con:

\t \t $(document).ready(function(){ 
 
\t \t 
 
\t \t $(".fc-event").each(function(){ 
 
\t \t 
 
\t \t \t console.log(this.attributes['data'].nodeValue) \t 
 
\t \t }); 
 
    
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id='external-events'> 
 
\t \t \t <h4>Booking</h4> 
 
\t \t \t <div class='fc-event' data='00:30:00' >30 Mins</div> 
 
\t \t \t <div class='fc-event' data='00:45:00' >45 Mins</div> 
 
</div>

Problemi correlati