我正在尝试使用jquery / php从ajax创建评级小部件的多个实例。我面临的问题是我无法创建代码的多个实例。如果数据来自ajax调用的成功函数,我只想向p标签添加属性。对于第二个实例,我将获取数据并将其发送到发布请求。但是当前数据正在添加到所有实例。我正在基于data-service-url-name创建唯一的小部件。
这是我的代码:
jquery / Ajax
$.ajax({
url: './post.php',
success: function(result){
console.log(result)
for(var i =0; i < result.length; i++){
var pTag = '.rating-container p';
var checkRating = $('.rating-container p').attr('data-service-url-name')
var total_ratings = result[i]['total_ratings'];
var average_ratings = result[i]['average_ratings'];
var rating_id = result[i]['rating_id']
if(checkRating == result[i]['service_url']){
$(pTag).attr('data-service-rank', average_ratings);
$(pTag).attr('data-rating-id', rating_id);
$(pTag).attr('data-reviews-count', total_ratings);
$('.star-bar-container').each(function(){
initServiceResponsiveStarBar($(this),
$(this).data('service-url-name'),
$(this).data('reviews-count'));
});
}
}
},
dataType: 'json'
})
这是我的html。
<div class="rating-container">
<p
data-service-url-name="design-crowd"
data-reviews-count="0"
class="star-bar-container design-crowd unselected"
style="display: inline-flex;">
<span data-star-rank="1" title="Poor" class="star-icon ratable full">☆</span>
<span data-star-rank="2" title="Fair" class="star-icon ratable full">☆
</span><span data-star-rank="3" title="Good" class="star-icon ratable full">☆
</span><span data-star-rank="4" title="Very Good" class="star-icon ratable full">☆
</span><span data-star-rank="5" title="Excellent" class="star-icon ratable half">☆</span>
</p>
<div class="hint-container"><label class="hint-label freelancer">Rate it!</label></div>
</div>
<div class="rating-container">
<p
data-service-url-name="upwork"
data-reviews-count="0"
class="star-bar-container upwork unselected"
style="display: inline-flex;">
<span data-star-rank="1" title="Poor" class="star-icon ratable full">☆</span>
<span data-star-rank="2" title="Fair" class="star-icon ratable full">☆
</span><span data-star-rank="3" title="Good" class="star-icon ratable full">☆
</span><span data-star-rank="4" title="Very Good" class="star-icon ratable full">☆
</span><span data-star-rank="5" title="Excellent" class="star-icon ratable half">☆</span>
</p>