jQuery下如何实现星级span与对应输入框评分值的精准映射

你现有代码存在两处明显的逻辑缺陷：

• 调用$(".rating-value").val()时，jQuery默认只会取页面上第一个匹配到的评分输入框的值，不会遍历所有同类输入元素
• 全局选择器$(".rating>span...")会命中页面上所有评分块的星星元素，没有建立输入框和对应评分块的关联关系，最终导致所有评分块都套用了第一个输入框的评分样式

$(document).ready(function(){
    // 遍历页面上所有的评分输入框
    $(".rating-value").each(function(){
        // 取当前遍历到的输入框存储的评分值
        const currentScore = parseInt($(this).val());
        // 精准匹配当前输入框相邻的对应评分块，给指定数量的星星添加选中样式类
        $(this).next(".rating").children("span:nth-child(-n+" + currentScore + ")").addClass("rating-checked");
    });
});

• 用each()方法遍历所有.rating-value元素，跳出“只取第一个输入框值”的全局取值误区
• 通过$(this).next(".rating")做节点关联，只在当前输入框紧邻的对应评分块范围内操作元素，不会跨组影响其他评分块的展示
• 每一组评分的样式添加操作都在独立的遍历作用域内完成，从根源上避免全局选择器误操作的问题

注意：如果后续DOM结构调整，输入框和对应评分块之间插入了其他类型的节点，next()方法会出现匹配失败的问题。这种场景下建议给每一组评分加上带标识的公共父容器，通过父容器查找内部元素做关联匹配，避免节点位置变动导致逻辑失效。

内容的提问来源于stack exchange，提问作者Niloy Rony