Laravel:评级系统Javascript显示

Question

我在做一个审查系统。我已经完成了post，但是get和display不能完美工作。你能帮帮我吗？

HTML：

<input type="hidden" id="aa" value="{{$re->rating}}" />
<div id="d"></div>

JAVASCRIPT：

var wrapper2 = document.getElementById("d");
var rating = 0;
var myHTML2 = '';
var rating = document.getElementById("aa").value;
var nonee= 0;
nonee = 5 - rating;

for (var w = 0; w <rating; w++) {
    myHTML2 += '<span class="fa fa-star"></span>';
}
for (var e = 0; e <nonee; e++) {
    myHTML2 += '<span class="fa fa-star-o"></span>';
}  

wrapper2.innerHTML = myHTML2;

结果应该是三次评论和评级，但它只会在第一次评论中显示评级，其余的都不显示。

Answer 1

您的解决方案只能用于显示1个评分/评论。如果您需要显示更多评论，则需要使用一些迭代/循环对其进行修改。

如果你不使用AJAX来获取更多的评论，你可以使用刀片模板循环浏览所有的评论，因为你使用的是laravel。

@foreach($ratings as $re)
  <div class="d">
  @for($i = 0; $i < $re->rating; $re++)
    <span class="fa fa-star"></span>
  @endfor
  @for($i = 0; $i < 5 - $re->rating; $re++)
    <span class="fa fa-star-o"></span>
  @endfor
  </div>
@endforeach

如果你使用AJAX，你可以用JSON格式化你的评分输出，如下所示：

[
  {"review_id":1, "rating":3, "review":"not so bad"},
  {"review_id":2, "rating":5, "review":"good"},
  {"review_id":3, "rating":5, "review":"perfect"}
]

然后用javascript解码，然后让javascript处理HTML的生成：

<div id="containerRating"></div>
<script>
$.ajax({
  url: "http://...",
  type: "GET",
  success: function(data){
    var ratings = JSON.parse(data);
    for (var i=0; i<ratings.length; i++) {
      var ratingHtml = "<div class='review'>";
      for (var j=0; j<ratings[i]; j++) {
        ratingHtml = ratingHtml + "<span class='fa fa-star'></span>"
      }
      for (var j=0; j<5-ratings[i]; j++) {
        ratingHtml = ratingHtml + "<span class='fa fa-star-o'></span>"
      }
      ratingHtml = ratingHtml + "</div>"
      $("#containerRating").append(ratingHtml);
  }
});
</script>

Answer 2

尝尝这个。我在这里使用modal是因为它已经用modal测试过了。您可以将其更改为out on on non modal。使用ajax将结果显示在表中：

<div id="view" class="modal fade" >
            <div class="modal-dialog box box-default" role="document">
              <div class="modal-content">
                <div class="modal-header" style="background-color:#4287f5;color:white">
                  <p class="modal-title">Record</p>

                </div>
                <form class="form-horizontal" method="post"  role="form">
                        {{ csrf_field() }}
                <div class="modal-body">  
                   <div class="table-responsive">
                    <table id="tableID" class="table table-bordered table-striped table-highlight">
                    <thead>

                    </thead>

                    <tbody style="margin-left:10px;">

                    </tbody>

                  </table>
                    </div>
                </div>
                    <div class="modal-footer" style="background-color:#4287f5;color:white">
                        <button type="button" id="btnclose" class="btn btn-primary btn-xs" data-dismiss="modal">Close</button>
                    </div>

                    </form>
                </div>

              </div>
            </div>

//ajax

<script>
     function getResult(x)
   {

        var ID = x;
        //alert(ID);
        $.get('/url?recordID='+ID, function(data){
         var html = '';
              html +='<tr bgcolor="#c7c7c7" align="center">';
              html +='<th align="center">Review</th>';
              html +='<th align="center">Ratings</th>';
              html +='</tr>';
          $.each(data,function(index,obj){

              html +='<tr>';
              html +='<td>'+ obj.review+'</td>';

              html +='<td>'+ obj.ratings+'</td>';
              }
              html +='</tr>';
              $('#tableID').html(html);
          });


         });
         $("#view").modal('show')
   }

</script>