Jak uzyskać dostęp do danych za pomocą atrybutu jQuery

Question

jestem zmaga się z tego, co jest prawdopodobnie bardzo prosty kawałek jQuery

Mam html tak:

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

Mam skrypt, który musi coś zrobić na podstawie ratingu gwiazdą każdego z tych elementów i obecnie wygląda tak:

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

Chcę zastąpić <value of data-star-rating> z wartością atrybutu danych odnoszących do elementu aktualnie przetwarzanego

myślałem, że to będzie działać $(this).data('starRating') ale nie wydaje się, aby

Jak mogę uzyskać dostęp do wartości atrybutu danych w tej sytuacji?

Answer 1

$(this) nie odnosi się do elementu, na którym funkcja jRate jest nazywany.

Można użyć selektora jeśli istnieje tylko jeden element mający tę klasę

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

Dla wielu elementów:

iteracyjne nad wszystkich elementów mających klasę star-rating i dołączyć wtyczkę jRate indywidualnie z wartością rating odpowiedniego elementu.

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

JSFiddle Demo^{Nie znaleziono CDN link do tej wtyczki, więc dodaje kod minified w okienku JavaScript sama}

Answer 2

Musisz użyć tego:

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

Answer 3

Można to wykorzystać też:

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

EDIT

Po ponownym przeczytaniu pytanie. Komentarze są poprawne, powinieneś iterować za pomocą tablicy .star-rating, aby zastosować jRate do każdego elementu, przepraszam za moje nieporozumienie.

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

Answer 4

Ponieważ istnieje więcej niż jeden elementy posiadające klasę „Star-rating”, więc trzeba będzie pętli przez elemets i pętli foreach uczyni prąd elementem Iteracja dostępny do pętli, dzięki czemu można używać tego elementu. I zastosuj 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') będzie działać, jeśli go zwrócić z funkcji.

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