JQueryの5つ星評価onmouseoverシステムで前の星に記入してください

Question

私は5つ星の評価システムを実装し、マウスオーバーポジション黄色（クラスはと呼ばれます）から残った星を埋めたいと思っています。それ以外の場合はgreyです。私はこれまでのところ、これを行っている

：

HTML：

<div id="stars3"> 
<i data-count="0" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="1" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="2" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="3" class="glyphicon glyphicon-star grey-light grey"></i> 
<i data-count="4" class="glyphicon glyphicon-star grey-light grey"></i> 
</div> 

はJQuery：

$("[id^=stars] > i").hover(function() { 
    count = $(this).attr("data-count"); 
    $(this).each(function (i) { 
     if ($(this).attr("data-count") < count) 
     $(this).addClass("yellow"); 
    }); 
    console.log($(this)); 
}); 

しかし、これが唯一の黄色に1つの星を埋めます。以前のすべての単一の<i>要素を何とか選択して入力する必要があります。どうすればこれを達成できますか？

Answer 1

Fiddleをご確認ください。これはあなたが探していたものですか？このよう

$("#stars3 > i").hover(function() { 
$(this).prevAll().addClass('yellow').removeClass('grey') 
$(this).addClass('yellow').removeClass('grey') 
$(this).nextAll().addClass('grey').removeClass('yellow') 
}); 

Answer 2

：

$("[id^=stars] > i").hover(function() { 
 
    $(this).prevAll().addBack().toggleClass("yellow"); 
 
});

.yellow { background-color:yellow }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="stars3"> 
 
    <i data-count="0" class="glyphicon glyphicon-star grey-light grey">*</i> 
 
    <i data-count="1" class="glyphicon glyphicon-star grey-light grey">*</i> 
 
    <i data-count="2" class="glyphicon glyphicon-star grey-light grey">*</i> 
 
    <i data-count="3" class="glyphicon glyphicon-star grey-light grey">*</i> 
 
    <i data-count="4" class="glyphicon glyphicon-star grey-light grey">*</i> 
 
    </div>