Question

我正在创建一个明星审查机制。现在我的问题是我如何捕捉半星？这就是我正在做的添加一颗星并更改显示每个类别上有多少颗星的条形图。这很有效。感谢Barmar昨晚修复了这个漏洞。但半星真的让我很烦恼。 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);

我正在失去索引

Answer 1

我在这里做了很多改变，但基本上我做了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/

如何进行半星评论

1 个答案: