实现评级和jquery的简单问题

Question

我在这里有一个非常简单的问题，但不知何故无法解决这个问题，因为我对 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 部分

$("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");
});

我正在寻找的是，即使有人点击了任何开始，他也应该能够再次更改它，或者选择更高或更低的评级

如果有人能指导我这个简单的事情，将高度赞赏

提前感谢您的时间和努力

Answer 1

首先删除这个：

$(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/

为此有许多现成的解决方案。