0

我正在创建一个星级审查机制。现在我的问题是如何捕捉半星？这就是我正在做的添加一颗星并更改显示每个类别有多少颗星的栏。这很好用。感谢 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);

我失去了索引

4

1 回答 1

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/

于 2013-04-15T04:04:21.340 回答