如何获得半星评价

how to have a half star review

本文关键字：评价 何获得      更新时间：2023-09-26

我正在创建一个星级评审机制。现在我的问题是如何捕获半颗星?这就是我所做的，添加一颗星，并改变栏显示多少颗星在每个类别。这工作得很好。感谢Barmar昨晚修复了bug。但那颗半星真的让我很困扰。jquery看起来像这样

$('.star').click(function () {
        var num = parseInt($('.likes').eq($(this).index('.star')).text());
        $('.likes').eq($(this).index('.star')).text(num + 1);
        $(this).addClass('active').off('click');
        $(this).prevAll().addClass('active').off('click');
        checkNumber(num+1);
    });

这是小提琴http://jsfiddle.net/sghoush1/VU3LP/54/

当我做这个

$('.likes').eq($(this).index('.star')).text(num + .5);

我正在丢失索引

我在这里做了一些改变，但基本上我用10个半星来制作5个等级的星星。当用户点击半颗星时，相应的星星等级增加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/

相关文章：