評価星は、ホバリングと選択解除で問題が発生します

Question

私のアプリケーションで評価星システムを実装しましたが、2つの問題があります。

まず、選択した星の上にマウスを乗せていると、それは宙に浮かんでいることを示していますが、選択されたことを示すはずです。私は選択されたクラスのz-indexを変更しようとしましたが、それは助けになりませんでした

第二に、私は5星から1星に変更しようとすると、星を選択解除していません。

<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>

すべてのヘルプは

HTMLを理解されるであろう

用途：

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

選択