Javascript 使用jquery进行简单的dom遍历

我正在与先前的开发人员星级代码合作。我需要修改它，因为它没有按照开发人员预期的方式运行。如果你看，有

标签

元素里面有星星。您可以看到第一个

标签有1个
span
，而第五个
标签有5个
span

它现在如何工作的一个例子是你点击第五个
输入
开发者在
标签
中有五颗星，但是为了让它按预期工作我实际上还需要修改其他标签跨距。所以，假设用户选择了3颗星，我需要对标签1、2和3中的
span
进行变异。为了选择4颗星，我需要对标签1、2、3和4中的
span
进行变异

我在考虑一个jquery/javascript解决方案，它可以遍历标签（可能带有id）。因此，如果他们单击输入4，javascript解决方案将循环遍历标签1、2、3和4内的所有跨度，并更新css。但我不知道该怎么做

<div class="rating-selector">
    <label>
        <input type="radio" name="rating" value="1" />
        <span class="icon">★</span>
    </label>
    <label>
        <input type="radio" name="rating" value="2" />
        <span class="icon">★</span>
        <span class="icon">★</span>
    </label>
    <label>
        <input type="radio" name="rating" value="3" />
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>   
    </label>
    <label>
        <input type="radio" name="rating" value="4" />
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
    </label>
    <label>
        <input type="radio" name="rating" value="5" />
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
    </label>
</div>


★
★
★
★
★
★   
★
★
★
★
★
★
★
★
★
有一个更简单的纯CSS解决方案：


。分级选择器{
显示：内联块；
边界：0；
方向：rtl；
}
输入[name=“rating”]{
显示：无；
}
输入[name=“rating”]~标签{
颜色：灰色
}
输入[name=“rating”]：选中~标签{
颜色：金色
}

★
★
★
★
★
您可以使用
.closest（“label”）.index（）找到父级
索引。然后，使用抓取之前的每个项目


const highlightPrevious=（elem）=>{
设$this=$（elem）；
$（“.rating选择器标签span”）.css（“颜色”，”；//重置样式
设idx=$this.index（）；//获取所选标签的索引
$（`.rating selector label:lt（${idx+1}）span`）.css（“颜色”、“红色”）；//设置所有标签跨度（包括选定索引）的样式
};
$（“标签”）
。单击（函数（）{highlightPrevious（this）；}）
.mouseover（函数（）{$（this）.click（）}）

★
★
★
★
★
★   
★
★
★
★
★
★
★
★
★
我不相信第一个例子完全实现了OP想要的，但我可能错了。“因此，如果他们单击输入4，javascript解决方案将循环遍历标签1、2、3和4内的所有跨距并更新css。”-您的解决方案只修改所选标签内的跨距，而不修改其前面的跨距。@Santi，您完全正确，OP想用一种奇怪的方法修复奇怪的实现。我会完全替换它。=））@KoshVery我完全同意，但我不想重新实现我更愿意修复的代码。@jkushner，这当然取决于你。它与太多其他组件有关。重新实现将是一场更大的噩梦，但我完全同意我像个男人，我只想重做这件事。你能解释一下为什么用勾号而不是撇号吗？不过效果很好。另外，您将如何实现按相反顺序运行？当页面加载时，如果他们将鼠标悬停在第五颗星上，当前之前的dont shineI尝试添加$（“：radio”）。单击$（“：radio”）。将鼠标悬停在运气不佳的位置，但我认为这不正确。这可能会导致与click的竞争条件。我不清楚“反向顺序”是什么意思。你是说你想用
悬停
替换
点击
事件吗？我说的是当你开始加载页面时，你试图从悬停中点击第五颗星，之前的四颗星不会被启用。不过，点击部分效果很好。