Question

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

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

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
    });
});

在可扩展div jQuery上悬停/取消悬停时多次调用

1 个答案: