Come accedere attributo data utilizzando jQuery

Question

sto lottando con quello che è probabilmente molto semplice po 'di jQuery

ho html come questo:

<div class="star-rating" data-star-rating="5.0"></div> 
<div class="star-rating" data-star-rating="2.0"></div> 

Ho un javascript che ha bisogno di fare qualcosa sulla base del numero di stelle di ciascuno di questi elementi e attualmente si presenta in questo modo:

$('.star-rating').jRate({ 
    startColor : '#ccc', 
    endColor : '#ccc', 
    readOnly : true, 
    rating : <value of data-star-rating> 
}); 

voglio sostituire <value of data-star-rating> con il valore dei dati relativi attributi all'elemento in fase di elaborazione

Ho pensato che questo avrebbe funzionato $(this).data('starRating') ma non sembra

Come posso accedere al valore dell'attributo di dati in questa situazione?

Answer 1

$(this) non si riferisce all'elemento su cui viene chiamata la funzione jRate.

È possibile utilizzare il selettore se c'è solo un unico elemento con quella classe

$('.star-rating').jRate({ 
    startColor : '#ccc', 
    endColor : '#ccc', 
    readOnly : true, 
    rating : $('.star-rating').data('star-rating') 
}); 

per più elementi:

iterare su tutti gli elementi che hanno la classe star-rating e allegare il plugin jRate singolarmente con il valore rating del rispettivo elemento.

$('.star-rating').each(function() { 
    $(this).jRate({ 
     startColor: '#ccc', 
     endColor: '#ccc', 
     readOnly: true, 
     rating: $(this).data('star-rating') 
    }); 
}); 

JSFiddle Demo^{Non hai trovato CDN link del plug-in che, così ha aggiunto il codice minimizzato nel riquadro JavaScript per sé}

Answer 2

È necessario utilizzare questo:

$(this).attr('data-star-rating'); 

Answer 3

È possibile utilizzare anche questo:

$(this).data('star-rating'); 

EDIT

Dopo aver letto di nuovo la questione. I commenti sono giusti, dovresti scorrere l'array .star-rating per applicare la jRate a ciascun elemento, mi dispiace per il mio malinteso.

$('.star-rating').each(function() {  
    $(this).jRate({ 
     startColor: '#ccc', 
     endColor: '#ccc', 
     readOnly: true, 
     rating: $(this).data('star-rating') 
    }); 
}); 

Answer 4

Come ci sono più di uno gli elementi che hanno codice categoria "star-rating" quindi sarà necessario collegare attraverso le elemets e ciclo foreach farà attuale elemento di iterazione accessibili in loop in modo da poter utilizzare tale elemento. E applica il JRate.

$('.star-rating').forEach(function(dateRating){ 
    $(dateRating).jRate({ 
    startColor : '#ccc', 
    endColor : '#ccc', 
    readOnly : true, 
    rating : $(dateRating).attr("data-star-rating") 
}); 
}); 

Answer 5

$(this).data('star-rating') funzionerà se si torna da una funzione.

$('.star-rating').jRate({ 
    startColor : '#ccc', 
    endColor : '#ccc', 
    readOnly : true, 
    rating : function() { return $(this).data('star-rating'); } 
});