jquery - 实现评级和 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);
}

现在，一旦任何人点击任何星星，点击事件就会生效并按如下方式解除绑定(bind):

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

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