javascript - jQuery Javascript 评级 : Making the rating reappear when user takes their cursor off

Question

我有这个 jQuery 代码可以处理悬停在评级星星上的问题，当您将鼠标悬停在星星上时，它们会按照预期的方式发光。问题是，一旦您将光标移开，它仍会显示光标所在的位置(并且不显示原始评分)。我如何让它检查光标何时被移除，然后显示原始评分？

$(document).ready(function() {


    $("[id^=rating_]").hover(function() {


        rid = $(this).attr("id").split("_")[1];
        $("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {

            $("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");

            /* The hovered item number */
            var hovered = $(this).parent().attr("class").split("_")[1];

            while(hovered > 0) {
                $("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
                hovered--;
            }

        });
    });

    $("[id^=rating_]").children("[class^=star_]").click(function() {

        var current_star = $(this).attr("class").split("_")[1];
        var rid = $(this).parent().attr("id").split("_")[1];

        $('#rating_'+rid).load('http://localhost:8888/fivestars/send.php', {rating: current_star, id: rid});

    });




});

编辑:为具有 3 星评级的内容输出 HTML:

<div id="rating_3">
            <span class="star_1"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span>
            <span class="star_2"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span>
            <span class="star_3"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span>
            <span class="star_4"><img src="http://localhost:8888/fivestars/star_blank.png" alt=""  /></span>
            <span class="star_5"><img src="http://localhost:8888/fivestars/star_blank.png" alt=""  /></span>
        </div>

Answer 1

更新:

所选评分存储在 ratings_x 元素的 data() 中，并在您离开评分区域时检索。

    $('[class^=star_]').mouseenter(
        function() {
            if($(this).parent().data('selected') == undefined) {
                var selectedStar = $(this).parent().find('.hover').length - 1;
                $(this).parent().data('selected', selectedStar)
            }
            $(this).children().addClass('hover');
            $(this).prevAll().children().addClass('hover');
            $(this).nextAll().children().removeClass('hover');
        });

    $('[id^=rating_]').mouseleave(
        function() {
            var selectedIndex = $(this).data('selected')
            var $selected = $(this).find('img').eq(selectedIndex).addClass('hover').parent();
            $selected.prevAll().children().addClass('hover');
            $selected.nextAll().children().removeClass('hover');
    });

---

hover() 的正确用法是有两个函数:

$('#myElement').hover(
    function() {
        // mouseenter code
    },
    function() {
        // mouseleave code
    }
);

使用第二个函数设置鼠标离开元素时的正确 View 。