星星評價怎麼做？

Question

<img class="rate_bstar bstar1" src="images/bstar.png">
            <img class="rate_bstar bstar2" src="images/bstar.png">
            <img class="rate_bstar bstar3" src="images/bstar.png">
            <img class="rate_bstar bstar4" src="images/bstar.png">
            <img class="rate_bstar bstar5" src="images/bstar.png">

$(".bstar1").mouseenter(function(e) {
  $('.bstar1').prop('src', 'images/star.png');
});

就是指標在哪裡，黃星星就會補滿
bstar 是灰的
star 是黃的
我越寫越不對，這樣好像不通？
怎麼寫才對？
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
更新

我寫這樣

$('.rate_bstar').hover(
   function() {
       $(this).prevAll().prop('src', 'images/star.png');
       $(this).prop('src', 'images/star.png');
       $(this).nextAll().prop('src', 'images/bstar.png');
   },
   function() {
       $(this).prevAll().prop('src', 'images/bstar.png');
       $(this).prop('src', 'images/bstar.png');
       $(this).nextAll().prop('src', 'images/bstar.png');
   }
);

發現這樣可以，但我點擊後我想讓他停在那個狀態，不要消失

Answer 1

<div id="startImg">
    <img class="rate_bstar bstar1" src="images/bstar.png">
    <img class="rate_bstar bstar2" src="images/bstar.png">
    <img class="rate_bstar bstar3" src="images/bstar.png">
    <img class="rate_bstar bstar4" src="images/bstar.png">
    <img class="rate_bstar bstar5" src="images/bstar.png">
</div>

$("#startImg").on("click",'img',a)
$('#startImg img').hover(a,b);
function a(){
    $(this).attr('src', 'images/star.png')
    $(this).prevAll().attr('src', 'images/star.png')
    $(this).nextAll().attr('src', 'images/bstar.png');
}
function b(){
    $('#startImg img').attr('src', 'images/bstar.png');
}

Answer 2

$(".rate_bstar").mouseenter(function(e) {
  $(this).attr('src', 'images/star.png').prevAll().attr('src', 'images/star.png');
});

鼠标离开的时候全部改回来就行了。

Answer 3

直接找个库，何必自己做呢

Answer 4

提供思路 ：

var rate = 1;
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);