Làm thế nào để truy cập vào thuộc tính dữ liệu sử dụng jQuery

Question

Tôi đang phải vật lộn với những gì có lẽ là một chút rất đơn giản của jQuery

Tôi có html như thế này:

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

Tôi có một số javascript mà cần phải làm điều gì đó dựa trên xếp hạng sao của từng yếu tố và hiện trông như thế này:

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

tôi muốn thay thế <value of data-star-rating> với giá trị của các dữ liệu thuộc tính liên quan đến các yếu tố đang được xử lý

Tôi nghĩ điều này sẽ làm việc $(this).data('starRating') nhưng nó dường như không

Làm thế nào tôi có thể truy cập giá trị của thuộc tính dữ liệu trong tình huống này?

Answer 1

$(this) không đề cập đến các yếu tố mà hàm jRate đang được gọi.

Bạn có thể sử dụng bộ chọn nếu có chỉ là một yếu tố duy nhất có mà lớp

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

Đối với nhiều yếu tố:

lặp qua tất cả các yếu tố có lớp star-rating và đính kèm các plugin jRate riêng lẻ với giá trị rating của phần tử tương ứng.

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

JSFiddle Demo^{Không tìm thấy CDN liên kết của plugin đó, vì vậy bổ sung mã được rút gọn trong cửa sổ JavaScript tự}

Answer 2

Bạn phải sử dụng này:

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

Answer 3

Bạn có thể sử dụng điều này quá:

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

EDIT

Sau khi đọc lại câu hỏi. Nhận xét là đúng, bạn nên lặp qua mảng .star-rating để áp dụng jRate cho từng phần tử, xin lỗi vì sự hiểu lầm của tôi.

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

Answer 4

Vì có nhiều hơn một yếu tố có lớp "sao giá" vì vậy bạn sẽ cần phải lặp qua các Elemets và foreach vòng lặp sẽ làm cho yếu tố iterating hiện truy cập vào vòng lặp, do đó bạn có thể sử dụng phần tử đó. Và áp dụng 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') sẽ làm việc nếu bạn quay lại nó từ một hàm.

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