javascript - 在可扩展的 div jQuery 上悬停/取消悬停期间多次调用

Question

我有以下 JSFiddle .共有 10 颗星代表一个评分量表。我想最初只显示一颗星，之后当用户将鼠标悬停在星上时，评级范围会扩大以显示所有星。然后用户可以通过点击他想要的星来选择他的评级。当鼠标悬停在外时，评分等级应该会缩回一颗星。

我已经用 jQuery 部分完成了这个，但它有问题。在控制台上进行的调试显示，在尝试评级时，悬停/取消悬停会多次触发，并导致 div 在无限循环中展开/折叠。我尝试在 .animate() 之前添加 .stop() 但这并不能解决问题，我似乎无法找到导致它的原因。

Answer 1

您只需要跟踪星星是否展开，并且只有在它们没有展开时才触发悬停处理程序。有很多方法可以做到这一点，例如:

$(function () {
    $('.rating-container .stars:not(.expanded)').hover(

    function () {
        $(this).addClass('expanded');
        // rest of your code as-is
    },

    function () {
        $(this).removeClass('expanded');
        // rest of your code as-is
    });
});