Javascript 如何将评级范围与输入评级值进行映射？

我有如下示例所示的动态html结构，其中输入字段中有评级值

<input class="rating-value"  value=4>
                                    
<div class="rating">
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
</div>

<input class="rating-value"  value=5>
                                    
<div class="rating">
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
</div>

我正在尝试映射它，我已经尝试了下面的映射代码

<script>
    $(document).ready(function(){
        var val = parseInt($(".rating-value").val());
        $(".rating>span:nth-child(-n+"+val+")").addClass("rating-checked");
    });
</script>

$（文档）.ready（函数（）{
var val=parseInt（$（“.rating value”）.val（）；
$（“.rating>span:n个子（-n+“+val+”）.addClass（“已检查评级”）；
});

---

对于所有评级dom都有值4的情况，如何将其输入字段映射到相同的评级div？

您当前的代码只查看集合中的第一个

.rating value

元素。您需要遍历所有这些函数，这可以使用

each（）

完成

从那里，您需要找到与当前

额定值相关的
.rating span
元素。在这种情况下，可以使用jQuery的DOM遍历方法、
next（）
、
find（）
和
：lt
选择器来完成。试试这个：


jQuery（$=>{
$（“.额定值”）。每个（（i，el）=>{
$（el）.next（'.rating'）.find（`span:lt（${el.value}）`）.addClass（`rating-checked'）；
});
});
.rating选中{color:#C00；}