Star Rating through jQuery

Ethan Karla 409 28 Jul 2021

How to make a star rating through jQuery?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Aryan Kumar 26 Nov 2023

Creating a star rating system using jQuery involves handling user interactions and updating the visual representation of the rating. Below is a simple example of a star rating system using HTML and jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Star Rating with jQuery</title>
  <style>
    .rating-container {
      display: inline-block;
      font-size: 24px;
    }

    .star {
      cursor: pointer;
      color: #ccc;
      display: inline-block;
      margin: 0 4px;
    }

    .star.checked {
      color: gold;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<div class="rating-container" data-rating="0">
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>

<script>
  $(document).ready(function() {
    // Initial setup: set the rating based on data-rating attribute
    $('.star:lt(' + $('.rating-container').data('rating') + ')').addClass('checked');

    // Handle star click events
    $('.star').on('click', function() {
      // Remove 'checked' class from all stars
      $('.star').removeClass('checked');

      // Add 'checked' class to the clicked star and previous stars
      $(this).prevAll('.star').addBack().addClass('checked');

      // Update the data-rating attribute with the new rating
      $('.rating-container').data('rating', $(this).index() + 1);
    });
  });
</script>

</body>
</html>

In this example:

Stars are represented using HTML entities (★ for a solid star).
The stars are initially gray. When a user clicks on a star, it, and all the previous stars, turn gold.
The rating is stored in the data-rating attribute of the container, and it's updated dynamically as the user interacts with the stars.

Feel free to customize the styling and structure based on your design preferences. This example provides a basic foundation that you can build upon for a more sophisticated star rating system if needed.

forum

Star Rating through jQuery

Can you answer this question?

1 Answers