Javascript Jquery星级问题

我需要一些关于明星评级系统的帮助。问题是，我在一个页面上有多个星星评级，但如果我在另一个字段中单击一个星星，它也会突出显示以前所有未点亮的星星。不知道如何修复，请帮助。下面是我的代码

功能highlightStar（obj）{
移除突出显示（）；
$（'li'）。每个（函数（索引）{
$（this.addClass（'highlight'）；
如果（指数==$（“li”）。指数（obj））{
返回false；
}
});
}
函数removeHighlight（）{
$（'li'）.removeClass（'selected'）；
$（'li'）.removeClass（'highlight'）；
}
功能添加额定值（obj）{
$（'li'）。每个（函数（索引）{
$（this.addClass（'selected'）；
$（'评级'）.val（（指数+1））；
如果（指数==$（“li”）。指数（obj））{
返回false；
}
});
}
函数重置（）{
如果（$（“#评级”）.val（））{
$（'li'）。每个（函数（索引）{
$（this.addClass（'selected'）；
如果（（索引+1）=$（“#评级”）.val（））{
返回false；
}
});
}
}

字段1







字段2







字段3







字段4

只需创建一些侦听器，而不是所有这些内联函数：

$('li').on('mouseenter', function() {
    $(this).addClass('highlight'); // Add it to the clicked on LI
    $(this).prevAll('li').addClass('highlight'); // Add to all previous LI siblings too
});

$('li').on('mouseleave', function() {
    $('li').removeClass('highlight');
});

$('li').on('click', function() {
    $(this).addClass('selected');
    $(this).prevAll('li').addClass('selected');
});

然后，您需要的所有HTML是：

<ul>
    <li>?</li>
    <li>?</li>
    <li>?</li>
    <li>?</li>
    <li>?</li>
</ul>

或者，正如crush非常正确地指出的，使用：

---

这将添加两个侦听器，而不是更多的侦听器。

因为您选择的是页面上的所有lis，而不是当前集合中的lis。感谢您的回复，我可以问一下如何仅选择当前集合中的lis吗？不妨进入下一步并使用事件删除感谢您的回复。那么，您的意思是，与其使用highlightStar和removeHighlight函数，不如使用事件委派？在我尝试用事件委派替换函数后，现在星星不会亮起。只是为了好玩和增加一点活力，我更新了您的示例，使用ascii星星作为问号的对立面。您的委派示例虽然+1，但效果很好。@Pete故意说“是”，因为有多个项被添加到类中，如果运行与mouseenter上相同的两个调用，那就太傻了：）谢谢您的示例！现在我有另一个问题，当使用您的示例时，如何在单击星星时使其高亮显示？

$('li').hover(function() { // Mouse In
    $(this).addClass('highlight'); // Add it to the clicked on LI
    $(this).prevAll('li').addClass('highlight'); // Add to all previous LI siblings too
},function() { // Mouse Out
    $('li').removeClass('highlight');
});

$('table.db-table1').on('mouseenter', 'li', function( event ) {        
    $(this).addClass('highlight'); // Add it to the clicked on LI
    $(this).prevAll('li').addClass('highlight'); // Add to all previous LI 
}).on('mouseleave', 'li', function( event ) {
    $('li').removeClass('highlight');
});