ここでかなりの変更を加えましたが、基本的には 5 レベルの星を作るために半星を 10 個作成しました。ユーザーが半分をクリックすると、対応する星レベルの合計が 0.5 または 1.0 増加します (星のどちらの半分がクリックされたかによって異なります)。
あなたが持っていたのと同じようにクリックイベントを削除しましたが、より良い方法は、ユーザーがもう一度クリックできるようにしてから、最初のクリックから計算を元に戻すことです. また、一般的なコードのクリーンアップなどにも注意してください。
短縮された関連する HTML は次のとおりです。
<div id="stars">
<div class="star leftHalf"></div>
<div class="star rightHalf"></div>
[ ... ]
<div class="barHolder">
<table>
<tr>
<td>1 star</td>
<td class="bar"></td>
<td class="likes">20</td>
</tr>
[ ... ]
CSS
.star {
height:20px;
width:10px;
float:left;
margin-right:5px;
cursor:pointer;
}
.star.leftHalf{
margin-right:0px;
}
完全な JavaScript / jQuery
var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');
function checkNumber() {
$(".likes").each(function () {
var valueCurrent = parseFloat($(this).text()),
barActive = $(this).prev(".bar").children(".barActive");
if (isNaN(valueCurrent) || valueCurrent <= 20) {
barActive.css('width', 30);
} else if (valueCurrent <= 60) {
barActive.css('width', 80);
}else if (valueCurrent <= 70) {
barActive.css('width',120);
}
});
}
checkNumber();
$('.star').click(function () {
var starIndex = $("#stars div").index( $(this) ), // current half clicked; 0-9
starLevel = Math.ceil( ( starIndex+1 )/2 )-1, // current star clicked; 0-4
valCur = parseFloat( $('.likes').eq(starLevel).text() ), // current likes value
isHalfStar = starIndex % 2 ? false : true, // is this a half click (left side)?
valNew = valCur + (isHalfStar ? 0.5 : 1.0); // new likes value
$('.likes').eq(starLevel).text(valNew);
$(".star").removeClass("active").off("click");
$(this).addClass('active');
$(this).prevAll().addClass('active');
checkNumber();
});
そして、動作中のjsFiddle http://jsfiddle.net/daCrosby/VU3LP/64/