jQuery创建多个评级实例

时间:2018-11-15 16:47:12

标签: php jquery mysql ajax

我正在尝试使用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>

0 个答案:

没有答案