实现评级和jquery的简单问题

时间:2012-09-19 16:34:13

标签: jquery html css jquery-selectors

我在这里有一个非常简单的问题,但不知何故无法解决这个问题,因为我对jquery的想法很少

我正在使用这段代码来实现评级功能

http://www.dotnetcurry.com/ShowArticle.aspx?ID=440

一切都运转良好,但后来我注意到任何人点击任何一颗星,都无法改变评级。

以下是代码

制作一系列明星

<p>
    <img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="1" />
    <img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="2" />
    <img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="3" />
    <img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="4" />
    <img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="5" />
</p>

JS PART

$("img").mouseover(function() {
    giveRating($(this), "FilledStar.png");
    $(this).css("cursor", "pointer");
});

$("img").mouseout(function() {
    giveRating($(this), "EmptyStar.png");
});

// -------

function giveRating(img, image) {            
    img.attr("src", "Images/" + image).prevAll("img").attr("src", "Images/" + image);
}

现在,当任何人点击任何一个星星时,点击事件就会开始行动并按照以下方式进行解除绑定:

$("img).click(function () {
    $(img).unbind("mouseout mouseover click");
});

我看到的是即使有人点击了任何开头,他也应该能够再次更改它或者选择更高或更低的评级

如果有人可以指导我这个简单的事情,那将是非常高兴的

提前感谢您的时间和精力

1 个答案:

答案 0 :(得分:0)

首先删除它:

$(img).unbind("mouseout mouseover click");

此外,您必须存储评级并在搬出后将其恢复...

function giveRating(img, image) {            
    img.attr("src", "Images/" + image).prevAll("img").attr("src", "Images/" + image);
    img.parent().get(0).rating = img;
}

...

对不起,我很乐意完成这个。也许其他人会吗?

或者查看http://www.fyneworks.com/jquery/star-rating/

有许多现成的解决方案。