Jeff
Jeff

Reputation: 8421

How does the star rating works in the most simplest way?

I am tryng to run a star rating component in the most simplest approach. I got most of the code from this link. But unfortunately, nothing appears in the page.

Here is the html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="./rating-stars.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="./rating-stars.js"></script>
</head>
<body>

    <div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever1" class="rating-value" value="2.56">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever2" class="rating-value" value="1.9">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever3" class="rating-value" value="4.1">
      </div>
    </div>
  </div>
</div>

</body>
</html>

and then a simple css file called as rating-stars.css:

.star-rating {
  line-height:32px;
  font-size:1.25em;
}

.star-rating .fa-star{color: yellow;}

and finally the javascript file is:

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();
$(document).ready(function() {

});

The problem is, no star appears in the page. I checked the console, and it seems that, everything is fine, and there is no error.

Upvotes: 1

Views: 999

Answers (3)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

you can use the rateYo plugin

$(function () {
  $(".rateyo").rateYo({
    starWidth: "80px"
  }).on("rateyo.change", function (e, data) {
    var rating = data.rating;
    $(this).parent().find('.result').text('rating :'+ rating);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
    <div class="rateyo"
         data-rateyo-rating="1.5"
         data-rateyo-num-stars="5"></div>
         <span class='result'>0</span>
</div>

Upvotes: 2

Robert
Robert

Reputation: 20286

I don't see link to font awesome. There're multiple ways to add it check

http://fontawesome.io/get-started/

The simplest solution add between <head></head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Upvotes: 0

delinear
delinear

Reputation: 2795

It's using a custom font from fontawesome to create the stars (referenced from here: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css). The font is relative to that CSS file, so you either need to ensure you're including that file or that you have the fonts locally.

Upvotes: 0

Related Questions