與懸停和取消選擇的評級明星問題

Question

我在我的應用程序中實施了評級星級系統，但我有兩個問題。

首先，當我將鼠標懸停在選定的星形上時，它顯示它懸停，但它應該顯示它被選中。我嘗試改變選定班級的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

Answer 1

$(".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> 
 
\t \t \t \t \t </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> 
 
\t \t \t \t \t </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> 
 
\t \t \t \t \t </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> 
 
\t \t \t \t \t </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> 
 
\t \t \t \t \t </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"); 
}); 

要取消選擇