JQuery along with Font Awesome: Setting the default value for star rating

Question

JQuery along with Font Awesome: Setting the default value for star rating

The Situation:

I am currently working on a system where users can rate various products using Laravel. Each product has an average rating which is then used to display stars. These ratings are shown on the "Product Listing" page, which contains multiple products.

My Objective:

I am looking to pass a variable through a div in order to populate the stars when the page loads. I have attempted the following code:

<span class="rating" rating="3">
  <span class="star "></span>
  <span class="star "></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</span>

Here is the jQuery script I have tried:

$('.rating').each(function (event) {

  var rating = $(this).attr('rating');

  for(var i = 0; (i < rating); i++)
  {
        $('.rating span.star').eq(i).addClass('filled');
  }

});

However, I am facing issues with the stars being populated incorrectly and only taking into account the last product's rating while ignoring the rest.

You can see a live example here:

http://jsfiddle.net/qes0tgrt/

jquery html css font-awesome

Answer 1

Answer №1

To create stars in the correct direction, you will need to modify the .rating class as follows:

.rating {
       unicode-bidi:bidi-override;
       direction:ltr;
       font-size:30px;
}

To include half star functionality, add these classes:

span.star.half-filled:before{
    content: "\f089";
    color:#e3cf7a;
}
span.star.half-filled:after{
    content: "\f006";
    color:#e3cf7a;
    margin-left:-20px;
}

The JavaScript script should look like this:

$('.rating').each(function (event) {
   var rating = $(this).attr('rating');
   for(var i = 0; (i < rating); i++)
   {
      $(this).find('span.star').eq(i).addClass('filled');
   }
   //if rating has decimal places means its a half star
   if(rating % 1 > 0)
      $(this).find('span.star').eq(i - 1).addClass('half-filled');
});

For half star usage, the rating attribute should be utilized like so:

<span class="rating" rating="2.5">

Here's an updated working example : fiddle

Answer 2

To create stars in the correct direction, you will need to modify the .rating class as follows:

.rating {
       unicode-bidi:bidi-override;
       direction:ltr;
       font-size:30px;
}

To include half star functionality, add these classes:

span.star.half-filled:before{
    content: "\f089";
    color:#e3cf7a;
}
span.star.half-filled:after{
    content: "\f006";
    color:#e3cf7a;
    margin-left:-20px;
}

The JavaScript script should look like this:

$('.rating').each(function (event) {
   var rating = $(this).attr('rating');
   for(var i = 0; (i < rating); i++)
   {
      $(this).find('span.star').eq(i).addClass('filled');
   }
   //if rating has decimal places means its a half star
   if(rating % 1 > 0)
      $(this).find('span.star').eq(i - 1).addClass('half-filled');
});

For half star usage, the rating attribute should be utilized like so:

<span class="rating" rating="2.5">

Here's an updated working example : fiddle

JQuery along with Font Awesome: Setting the default value for star rating

Answer №1

Similar questions

"Utilize an AJAX call to dynamically retrieve and add results for every PHP loop

When utilizing the 'checkAll' method in a Bootstrap table, it will only select the checkboxes displayed on the current page

Difficulty with Script Causing Margin Bottom to Fail

Tips on aligning text vertically within a Bootstrap table

Utilizing AJAX to invoke the onget method with parameters in .NET Core

angular literal containing a strike tag

jQuery UI has encountered an issue: it seems that #accordion is not a recognized function

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Issues encountered while utilizing the jQuery function $.ajax()

Building a Responsive Grid Layout with HTML and CSS: Layering one div on top of another

jQuery asynchronous treeview collapse issue

What is the method for loading a subcategory based on the category by invoking a jQuery function within the <td> element of a JavaScript function that adds rows dynamically?

Is it possible to close a JavaScript IFRAME using code?

Issue with displaying spinner in bootstrap version 4.0.0

Ways to confirm the closure of the reveal modal in Zurb Foundation 4

Is there a way to remove the bold styling from text next to JavaScript?

Creating a Product Box design with CSS and incorporating visual elements

Dynamic table not triggering jQuery delegate event

Is Firefox triggering setTimeout function prematurely (or is Date.getTime() inaccurate)?

What are the steps for adding information to a MySQL database with GWT, HTML, and either JDBC or Hibernate?