[英]jQuery star rating system
I'm trying to do a very simple system 我正在尝试做一个非常简单的系统
My intention is to finish this system, my knowledge is very limited in javascript. 我的意图是完成此系统,我的知识非常有限。
mouseover: function(){
// remove hover
t.rate.eventDrain();
// fill hover
t.rate.eventFill($(this));
},
mouseout: function(){
t.rate.eventDrain();
},
http://jsfiddle.net/unm5N/7/ http://jsfiddle.net/unm5N/7/
My Question: How to make so that you can edit the score whenever you want, but if there was no change in the mouseover leave the previous score.
我的问题:如何进行制作,以便您可以随时编辑分数,但是如果鼠标悬停没有变化,请保留先前的分数。
You need to save selection state with data-selected
attribute used on clicked star. 您需要使用单击星号上使用的
data-selected
属性保存选择状态。 This will allow you to return to pre-mouseover selection state on mouseout
event 这将使您在发生
mouseout
事件时返回到鼠标悬停前的选择状态
So, here is the code: 因此,这是代码:
<div id="rating">
<a class="star"></a>
<a class="star"></a>
<a class="star"></a>
<a class="star"></a>
<a class="star"></a>
<!-- as many as you need -->
<input id="getRating" type="button" value="Rate!"></input>
</div>
a.star {
display:block;
height: 20px;
width: 20px;
background: url(http://sc.cuevana.tv/new/img/rate_list.png);
float: left;
cursor: pointer;
}
a.star.hover {
background-position: 0 -20px;
}
a.star.rated {
background-position: 0 -40px;
}
$(document).on("click", ".star", function (e) {
//clearing currrently "rated" star
$(".star").removeAttr("data-selected");
var $this = $(this);
//un-"rating" all the following stars
$this.nextAll(".star").removeClass("rated");
//mark clicked star with data-selected attribute
$this.addClass("rated").attr("data-selected", "true");
//mark previous stars
$this.prevAll(".star").addClass("rated");
});
$(document).on("mouseover", ".star", function (e) {
//unmark rated stars
$(".star").removeClass("rated");
var $this = $(this);
//mark currently hovered star as "hover"
$(this).addClass("hover");
//mark preceding stars as "hover"
$this.prevAll(".star").addClass("hover");
});
$(document).on("mouseout", ".star", function (e) {
//un-"hover" all the stars
$(".star").removeClass("hover");
//mark star with data-selected="true" and preceding stars as "rated"
$("[data-selected='true']").addClass("rated").prevAll(".star").addClass("rated");
});
$(document).on("click", "#getRating", function (e) {
//wise comment here
var rating = $(".star.rated").length;
alert(rating);
});
If I understand correctly you want to be able to "re-vote" if needed. 如果我理解正确,那么您希望可以在需要时“重新投票”。
You are going to need to add a few if statements, but this should do the trick. 您将需要添加一些if语句,但这应该可以解决问题。 It's messy, but I was in a hurry.
太乱了,但我很着急。
mouseover: function(){
if(!t.rate){
t.rate.eventDrain();
}else{
t.rate.eventFill($(this));
}`
Please note that the below is the incomplete function - just provided for example: 请注意,以下是不完整的功能-例如:
click: function(){
if($(this).prevAll().attr("class") == 'rated hover')
{
$("div.puntuar a").removeClass('rated');
$(this).add($(this).prevAll()).addClass('rated');
}else{
$(this).add($(this).prevAll()).addClass('rated');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.