jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
<div class='rating-stars text-center'>
	<ul id='stars'>
		<li class='star' title='Poor' data-value='1'>
			<i class='fa fa-star fa-fw' aria-hidden="true"></i>
		</li>
		<li class='star' title='Fair' data-value='2'>
			<i class='fa fa-star fa-fw'></i>
		</li>
		<li class='star' title='Good' data-value='3'>
			<i class='fa fa-star fa-fw'></i>
		</li>
		<li class='star' title='Excellent' data-value='4'>
			<i class='fa fa-star fa-fw'></i>
		</li>
		<li class='star' title='WOW!!!' data-value='5'>
			<i class='fa fa-star fa-fw'></i>
		</li>
	</ul>
</div>
<p id="stars_info"></p>
<input type="text" id="rating">

CSS

/*Star Rating*/

ul#stars {
    margin: 0 0 10px;
}

p#rating-label {
    font-size: 18px;
}

/* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type:none;
  padding:0;

  -moz-user-select:none;
  -webkit-user-select:none;
}
.rating-stars ul > li.star {
  display:inline-block;

}

/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
  font-size:2.5em; /* Change the size of the stars */
  color:#ccc; /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
  color:#FFCC36;
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
  color:#FF912C;
}

.wpcf7 {
    text-align: center;
}

.rating-stars {
    text-align: center;
}

.gift_form_submit:disabled {
    background-color: #ccc !important;
    cursor: default !important;
}

#gift_vote_btn {
    margin-bottom: 10px !important;
}

p#stars_info {
    font-size: 20px;
    color: #666;
    height: 20px;
}


@media (max-width:767px){
   .header_image {
    max-width: 50%;
    margin: auto;
   }
}

JavaScript

(function($) {
	function star_info(value){
			switch(value) {
				case 1: starInfo = 'nicht zufrieden';  break;
				case 2: starInfo = 'eher nicht zufrieden';  break;
				case 3: starInfo = 'teils-teils zufrieden';  break;
				case 4: starInfo = 'zufrieden';  break;
				case 5: starInfo = 'sehr zufrieden';  break;
			}
		return starInfo;
	}

  $(document).ready(function() {
    /* 1. Visualizing things on Hover - See next part for action on click */
    $('#stars li').on('mouseover', function() {
      var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on

      $("#stars_info").text(star_info(onStar));

      // Now highlight all the stars that's not after the current hovered star
      $(this).parent().children('li.star').each(function(e) {
        if (e < onStar) {
          $(this).addClass('hover');
        } else {
          $(this).removeClass('hover');
        }
      });

    }).on('mouseout', function(ratingValue) {
      $(this).parent().children('li.star').each(function(e) {
        $(this).removeClass('hover');
      });

      var onStar = parseInt($(this).data('value'), 10);
      var ratingValueHover = parseInt($('#stars li.selected').last().data('value'), 10);
      $("#stars_info p").text(star_info(ratingValueHover));

    });

    /* 2. Action to perform on click */
    $('#stars li').on('click', function() {
      var onStar = parseInt($(this).data('value'), 10); // The star currently selected
      var stars = $(this).parent().children('li.star');
      for (i = 0; i < stars.length; i++) {
        $(stars[i]).removeClass('selected');
      }

      for (i = 0; i < onStar; i++) {
        $(stars[i]).addClass('selected');
      }

      // JUST RESPONSE (Not needed)
      ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
      responseMessage(ratingValue);
    });
  });

  function responseMessage(ratingValue) {
    $("#stars_info p").text(star_info(ratingValue));
   ...