Question

我在我的网页上使用了评分系统。我已经使用this jQuery plugin了。这是my fiddle。我想要的是，评级号（例如，5个中的2个或2/5位于我的小提琴的右侧）也会在改变星级评级时更改，就像imdb.com一样。我该怎么做？

jQuery的：

$('.starbox').starbox({
    average: 0.42,
    autoUpdateAverage: true,
    ghosting: true
});

Answer 1

你能看一下吗？这里右边的行在悬停时更新，当你离开星星时，它会放回与突出显示的星星相对应的初始值

$('.starbox').starbox({
    average: 0.4,
    autoUpdateAverage: true,
    ghosting: true
});

$('.star').hover(function() {
    var currentHoveredNote = parseInt($(this).attr('class').replace("star star-", "")) + 1;
    $(this).closest(".block").find(".rating-value p").text(currentHoveredNote + '/5');
}, function() {
    $(this).closest(".block").find(".rating-value p").text(parseFloat($(this).closest(".starbox").starbox("getOption", "average")) * 5 + '/5');
});

http://jsfiddle.net/565LK/12/

Answer 2

由于您希望范围从1到5，因此您应该将平均值设置为{0.2,0.4,0.6,0.8,1.0}，因为控件的取值范围为0.0到1.0。接下来，您需要绑定到事件starbox-value-moved并在光标悬停时显示所选值，如：

.bind('starbox-value-moved', function(event, value) {
    $('.rating-value p').text(value * 5 + '/5');
});

要点击，您需要将其绑定到starbox-value-changed。

Answer 3

$(function() {
        $('.starbox').each(function() {
            var starbox = $(this);
            starbox.starbox({
                average: 0.4,
                changeable: true,
                ghosting: true,
                autoUpdateAverage: true,
            }).bind('starbox-value-changed', function(event, value) {                   
                    starbox.next().text(value*5+"/5");
            }).bind('starbox-value-moved', function(event, value) {
                starbox.next().text(value*5+"/5");
            });
        });
    });

Answer 4

您可以添加以下代码：

$(".block").each(function (ix, item) {
    var average = $(".starbox", item).starbox("getOption", "average");

    $(".rating-value p", item).text((5 * average).toFixed(0) + "/5");
});

请参阅working fiddle。

Answer 5

在当前函数后添加starbox-value-moved的绑定：

$('.starbox').starbox({
    average: 0.62,
    autoUpdateAverage: true,
    ghosting: true
}).bind('starbox-value-moved', function(event, value) {
    $('.rating-value p').text((value * 5) + "/5");
});

该值为0 - 1，因此您需要将其相乘以使其从0 - 5开始。

如何动态获取评级值

5 个答案: