jQuery hover and click events for a five-star rating This seems a little bit excessive, and was wondering if I can refactor this jQuery. I'm not sure if you need anymore information, or if it's possible just by looking at this script.

  var getActiveState;
  $(".modal-review__rating-order-wrap span").hover(function(){
    $(this).parent().removeClass("is-active");
    var thisStar = $(this).parent().find("[data-rating-value="+getActiveState+"]")
    thisStar.removeClass("is-active");
  }, function(){
    var thisStar = $(this).parent().find("[data-rating-value="+getActiveState+"]")
    if(getActiveState){
      $(this).parent().addClass("is-active");
      thisStar.addClass("is-active");
    }
  });
  $(".modal-review__rating-order-wrap span").on("click",function(){
    $(this).parent().addClass("is-active");
    $(".modal-review__rating-order-wrap span").not(this).removeClass("is-active");
    $(this).addClass("is-active");
    getActiveState = $(this).data("rating-value");
    return getActiveState;
  });


This is applied to a 5 star system, wanted to show what the jQuery is affecting. When jQuery clicks on the star, it adds an .is-active class to the span, and also to the wrap.

&lt;div class="modal-review__rating-order-wrap"&gt;
  &lt;span class="icon-star" data-rating-value="1"&gt;
    &lt;svg&gt;star 1&lt;/svg&gt;
  &lt;/span&gt;
  &lt;span class="icon-star" data-rating-value="2"&gt;
    &lt;svg&gt;star 2&lt;/svg&gt;
  &lt;/span&gt;
  &lt;span class="icon-star" data-rating-value="3"&gt;
    &lt;svg&gt;star 3&lt;/svg&gt;
  &lt;/span&gt;
  &lt;span class="icon-star" data-rating-value="4"&gt;
    &lt;svg&gt;star 4&lt;/svg&gt;
  &lt;/span&gt;
  &lt;span class="icon-star" data-rating-value="5"&gt;
    &lt;svg&gt;star 5&lt;/svg&gt;
  &lt;/span&gt;
&lt;/div&gt;
I couldn't see the Unicode stars in 200_success's answer on Chrome, so I made a version of their snippet with SVG stars from an old meta.SO post of mine:



$('.modal-review__rating-order-wrap &gt; span').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    $(this).parent().attr('data-rating-value', $(this).data('rating-value'));
});
/* Initial state */
div.modal-review__rating-order-wrap &gt; span {
    display: block; float: left;
    height: 30px; width: 40px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='30'%3E%3Cpath%20d='M17.5,12.5h-8.5l6.8,5-2.6,8.1,6.8-5,6.8,5-2.6-8.1,6.8-5h-8.5l-2.6-8.1z'%20fill='%23c0c0c0'%20stroke='%23c0c0c0'/%3E%3Cpath%20d='M57.5,12.5h-8.5l6.8,5-2.6,8.1,6.8-5,6.8,5-2.6-8.1,6.8-5h-8.5l-2.6-8.1z'%20fill='%23ffd83d'%20stroke='%23eac328'/%3E%3C/svg%3E");
    background-position: 0px 0px;    /* gray star */
}

/* Persistent state */
div.modal-review__rating-order-wrap[data-rating-value] &gt; span {
    background-position: -40px 0px;  /* gold star */
}
div.modal-review__rating-order-wrap &gt; span.active ~ span {
    background-position: 0px 0px;    /* gray star */
}

/* Hover state */
div.modal-review__rating-order-wrap[class]:hover &gt; span {
    background-position: -40px 0px;  /* gold star */
}
div.modal-review__rating-order-wrap[class] &gt; span:hover ~ span {
    background-position: 0px 0px;    /* gray star */
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="modal-review__rating-order-wrap"&gt;
  &lt;span data-rating-value="1"&gt;&lt;/span&gt;
  &lt;span data-rating-value="2"&gt;&lt;/span&gt;
  &lt;span data-rating-value="3"&gt;&lt;/span&gt;
  &lt;span data-rating-value="4"&gt;&lt;/span&gt;
  &lt;span data-rating-value="5"&gt;&lt;/span&gt;
&lt;/div&gt;




Note that I had to add [class] as a specificity hack to the last two CSS selectors, since otherwise the third selector (with .active) would override them.  (In 200_success's version, the :after pseudo-classes effectively serve the same function, but my version doesn't use them.)

I also made the inner spans into floating blocks to eliminate any whitespace gaps between them, since those cause annoying "blinking" effects when moving the mouse over the gap.  Flex layout on the outer div could be used to achieve the same effect.

Note that I've marked this "answer" as Community Wiki, since it's basically just an addendum to another answer.  I'd have posted it as a comment, but you can't include snippets in comments.  I didn't feel presumptuous enough to edit this into their answer directly, but if 200_success wants to do so, I'm happy to delete this "meta-answer".