用于选择评级的 jQuery 脚本

Question

我编写了用于选择评级的 jQuery 脚本
这是 HTML 代码

<div class="rating clearfix">
<div class="stars">
    <div class="stars_width"></div>
</div>
<input id="rating-input" type="hidden" value="8">
<input id="article-id" type="hidden" value="">
</div>

jQuery 脚本

function starsMouseMove(n, el) {
    var $el = $(el);
    var i = $el.offset().left,
        t = Math.floor((n.pageX - i)),
        w;
    if (t > 0 && t < 20) {
        w = 20;
    } else if (t >= 20 && t < 40) {
        w = 40;
    } else if (t >= 40 && t < 60) {
        w = 60;
    } else if (t >= 60 && t < 80) {
        w = 80;
    } else if (t >= 80 && t <= 100) {
        w = 100;
    }
    $(".stars_width", $el).css("width", w + "%");
};

function starsSelect(n, el) {
    var $el = $(el);
    var i = $el.offset().left,
        t = Math.floor((n.pageX - i)),
        w;
    if (t > 0 && t < 20) {
        w = 20;
    } else if (t >= 20 && t < 40) {
        w = 40;
    } else if (t >= 40 && t < 60) {
        w = 60;
    } else if (t >= 60 && t < 80) {
        w = 80;
    } else if (t >= 80 && t <= 100) {
        w = 100;
    }
    $(".stars_width", $el).css("width", w + "%");
    $el.parent().find('#rating-input').val(w / 10);
};

$(".stars_width").css("width", $("#rating-input").val() * 20 + "%");  
$('.stars').hover(function(e) {
    starsMouseMove(e, this);
}, function(e){
    $(".stars_width").css("width", $("#rating-input").val() * 20 + "%"); 
});

$('.stars').click(function(e) {
    starsSelect(e, this);
});

http://jsfiddle.net/tu8v3cnt/14/

我需要更改鼠标移动到 $('.stars') 上的评分，但仅在单击后才保存。如果未选择(单击)评分，我需要返回默认值。但我这里有一个问题，脚本在 click 上正常工作，但在 hover 上不正常。我该如何解决？
我在两个函数中有重复的代码，但我不知道没有它如何编写脚本。

Answer 1

使用 mousemove 函数似乎可以解决问题。对于保存，它只有在您单击时才会保存。如果您的意思是将评分保存到 article-id，则将代码中的所有 rating-input 更改为 article-id

演示

http://jsfiddle.net/w3k31quz/

代码

function starsMouseMove(n, el) {
        var $el = $(el);
        var i = $el.offset().left,
            t = Math.floor((n.pageX - i)),
            w;
        if (t > 0 && t < 20) {
            w = 20;
            $("#rating-input").val("1")
        } else if (t >= 20 && t < 40) {
            w = 40;
            $("#rating-input").val("2")
        } else if (t >= 40 && t < 60) {
            w = 60;
            $("#rating-input").val("3")
        } else if (t >= 60 && t < 80) {
            w = 80;
            $("#rating-input").val("4")
        } else if (t >= 80 && t <= 100) {
            w = 100;
            $("#rating-input").val("5")
        }
        $(".stars_width", $el).css("width", w + "%");
    };



    $(".stars_width").css("width", $("#rating-input").val() * 20 + "%");  
    $('.stars').mousemove(function(e) {
        starsMouseMove(e, this);
    });

    $('.stars').click(function(e) {
        alert($("#rating-input").val())
    });

代码的简写可以是将 w 除以 20

$("#rating-input").val(w / 20);

演示

http://jsfiddle.net/xtkfxbmn/