Laravel:输出值作为星级 [英] Laravel: Output value as a star rating

查看:67
本文介绍了Laravel:输出值作为星级的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

因此,我有一个评论系统,它将接受用户对酒店的评论.我也设法将星级评定系统纳入其中.星级评分系统可以正常工作,并且会将1-5中的值存储在数据库中.现在,当我单击评论时,我将能够看到用户的所有评论.但是,当我单击评论时,我看不到显示的星级.我将如何在评论中显示星级:

So i have a review system that will take in a users review of a hotel. I have managed to incorporate a star rating system in it too. The star rating system works and will store a value from 1-5 in the database. Now when i click on reviews i will be able to see all reviews from the user. However, when i click the reviews i am unable to see the star rating that is displayed. How will i manage to display the star rating on the review:

Show.blade.php

Show.blade.php

   {{Form::label('rating', 'Rating')}}
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font- 
   awesome/5.13.0/css/all.min.css">
  <form>
  <input type="radio" class="star-input" name="rating" id="star-1" value="1">
  <label for="star-1" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-2" value="2">
  <label for="star-2" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-3" value="3">
  <label for="star-3" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-4" value="4">
  <label for="star-4" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-5" value="5" 
  checked>
<label for="star-5" class="star"><i class="fas fa-star"></i></label>

 </form>
{{Form::Submit('submit', ['class' => 'btn btn-primary'])}}
{!! Form::close() !!}


    @if(count($review) > 1)
    @foreach($review as $reviews)
        <div class= "well"> 
            <h3><a href="/reviews/{{$reviews->title}}">{{$reviews->title}} </a>

    @for($i = 0; $i < 5; $i++)
      @if($i <= $reviews->rating)
        <label for="star-5" class="star">
        <i class="fas fa-star"span class="star star--gold"></span></i>
        </label>
      @else
      @endif
    @endfor

如您所见,我有{{$ reviews-> rating}},它的atm显示值为1-5.我将如何确切地显示实际的星星.

As you can see, i have {{$reviews-> rating}} which atm displays a value 1-5. How will i exactly display an actual star instead.

推荐答案

要在模板中输出星星,您可以在以下示例中执行以下操作.但是首先要注意您的变量用法:尝试使评论的任何数组都是复数的,而单个评论要是单数的.因此,所有评论为 $ reviews ,而单个评论为 $ review .这使您和其他人更容易理解和理解您的代码.

To output the stars in your templates you can do the following in the example below. But first a little note on your variable usage: Try to make any arrays of reviews plural and a single review singular. So $reviews for all reviews and a single review $review. This makes your code more readable and understandable for you and others.

因此,您的 $ review-> rating 属性是数字.当数字为3时,您要以正确的样式显示3星.

So your $review->rating property is number. When the number is 3 you want to show 3 stars with the correct styling.

使用循环输出5星.在该循环内,查看当前恒星的索引是否低于或等于额定值.如果是,则表示当前星必须是评级的一部分.如果不是这样,则意味着该星星应显示为灰色或以其他方式设置样式.

Use a loop to output 5 stars. Inside that loop see if the index of current star is lower or equal than the rating value. When it is, it means that the current star has to be part of the rating. And if it is not, it means that this star should be grayed out or styled differently.

这将导致所有应该是金色的星星上都具有 star--gold 类,可以对其进行相应样式设置.

This will result in all the stars that should be gold to have the star--gold class on it which can be styled accordingly.

@if(count($reviews) > 1)
  @foreach($reviews as $review)

    <div class= "well"> 
      <h3>
        <a href="/reviews/{{ $review->title }}">{{ $review->title }}</a>

        @for ($i = 0; $i < 5; $i++)
          @if ($i < $review->rating)
            <span class="star star--gold"></span>
          @else
            <span class="star"></span>
          @endif
        @endfor

      </h3>
      <small>{{ $review->created_at }}</small>
      <br>
      <small>{{ $review->body }}</small> 
      <br>
      <br>
    </div>

  @endforeach
@else

这篇关于Laravel:输出值作为星级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆