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功能似乎可以解决问题。对于保存，只有在您单击时才会保存。如果您的意思是将评分保存为文章ID ，请将代码中的所有评分输入更改为文章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/

用于选择评级的jQuery脚本

1 个答案: