Laravel: рейтинговая система Javascript дисплей - PullRequest
Новая
       3

Laravel: рейтинговая система Javascript дисплей

1 голос
/ 11 марта 2020

Я делаю систему обзора. Я сделал с сообщением, но получить и отобразить не будет идеально работать. Не могли бы вы помочь мне с этим.

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;

Результатом должно стать три отзыва вместе с рейтингом но он будет отображать только рейтинг в первом обзоре, остальные нет.

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

попробуйте это. Я использовал модал здесь, потому что он был протестирован с модал. Вы можете изменить его на немодальный. результат отображается в таблице с помощью 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>
0 голосов
/ 11 марта 2020

Ваше решение может быть использовано только для показа 1 оценки / отзыва. Если вам нужно показать больше обзоров, вам нужно изменить его с помощью нескольких итераций / циклов.

Если вы не используете AJAX для получения большего количества отзывов, вы можете просто l oop просмотреть все отзывы с шаблоном лезвия, так как вы используете 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>
...