我编写用于选择评级的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
上运行。我该如何解决?
我在两个函数中有重复的代码,但我不知道如何在没有它的情况下编写脚本。
答案 0 :(得分:2)
使用mousemove功能似乎可以解决问题。对于保存,只有在您单击时才会保存。如果您的意思是将评分保存为文章ID ,请将代码中的所有评分输入更改为文章ID
<强>演示强>
<强>代码强>
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);
<强>演示强>