javascript - 悬停和取消选择的星级评分问题

我在应用程序中实施了星级评分系统，但是有两个问题。

首先，当我将鼠标悬停在选定的星星上时，它显示它已悬停，但应该显示它已选定。我尝试更改所选课程的z-index，但没有帮助

其次，当我尝试从5星更改为1星时，并不是要取消选择星星。任何帮助将不胜感激

HTML：

<ul class="rating-stars">
    <li>
        <input id="rating_1" name="rating" type="radio" value="1">
        <label class="rating is-active" for="rating_1" title="1 Star">
            <span class="text">1 Star</span>
        </label>
    <li>
        <input id="rating_2" name="rating" type="radio" value="2">
        <label class="rating is-active" for="rating_2" title="2 Star">
            <span class="text">2 Star</span>
        </label>
    <li>
        <input id="rating_3" name="rating" type="radio" value="3">
        <label class="rating is-active" for="rating_3" title="3 Star">
            <span class="text">3 Star</span>
        </label>
    <li>
        <input id="rating_4" name="rating" type="radio" value="4">
        <label class="rating" for="rating_4" title="4 Star">
            <span class="text">4 Star</span>
        </label>
    <li>
        <input checked="checked" id="rating_5" name="rating" type="radio" value="5">
        <label class="rating" for="rating_5" title="5 Star">
            <span class="text">5 Star</span>
        </label>
</ul>

$(".rating-stars li").mouseenter(function () {
    $(this).children(".rating").addClass("is-hovered");
    $(this).prevAll("li").children(".rating").addClass("is-hovered");
}).mouseleave(function () {
    $(".rating-stars li").each(function () {
        $(this).children(".rating").removeClass("is-hovered");
    });
});

JS：

$(".rating-stars li").click(function () {
    $(".rating-stars li").children(".rating.current").removeClass("is-active");
    $(this).children(".rating").addClass("is-active")
    $(this).prevAll("li").children(".rating").addClass("is-active");
});

JSFiddle Demo

最佳答案

$(".rating-stars li").mouseenter(function() {
  $(this).children(".rating").addClass("is-hovered");
  $(this).prevAll("li").children(".rating").addClass("is-hovered");
}).mouseleave(function() {
  $(".rating-stars li").each(function() {
    $(this).children(".rating").removeClass("is-hovered");
  });
});

$(".rating-stars li").click(function() {
  $(".rating-stars li").children(".rating.is-active").removeClass("is-active");
  $(this).children(".rating").addClass("is-active")
  $(this).prevAll("li").children(".rating").addClass("is-active");
});

.rating-stars {
  list-style: none;
  margin: 0 0 20px 0;
}

.rating-stars li {
  float: left;
}

.rating-stars .text,
.rating-stars [type=radio] {
  position: absolute;
  left: -5000px;
}

.rating-stars .rating {
  display: block;
  width: 16px;
  height: 16px;
  background: url(http://i64.tinypic.com/2mnep79.png) center 0 no-repeat;
}

.rating-stars .is-active {
  background-position: center -16px;
  opacity: 1;
}

.rating-stars .is-hovered {
  background-position: center -16px;
  opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="rating-stars">
  <li>
    <input id="rating_1" name="rating" type="radio" value="1">
    <label class="rating is-active" for="rating_1" title="1 Star"><span class="text">1 Star</span>
					</label></li>
  <li>
    <input id="rating_2" name="rating" type="radio" value="2">
    <label class="rating is-active" for="rating_2" title="2 Star"><span class="text">2 Star</span>
					</label></li>
  <li>
    <input id="rating_3" name="rating" type="radio" value="3">
    <label class="rating is-active" for="rating_3" title="3 Star"><span class="text">3 Star</span>
					</label></li>
  <li>
    <input id="rating_4" name="rating" type="radio" value="4">
    <label class="rating" for="rating_4" title="4 Star"><span class="text">4 Star</span>
					</label></li>
  <li>
    <input checked="checked" id="rating_5" name="rating" type="radio" value="5">
    <label class="rating" for="rating_5" title="5 Star"><span class="text">5 Star</span>
					</label></li>
</ul>

采用 ：

$(".rating-stars li").click(function() {
  $(".rating-stars li").children(".rating.is-active").removeClass("is-active");
  $(this).children(".rating").addClass("is-active")
  $(this).prevAll("li").children(".rating").addClass("is-active");
});

取消选择所选对象