<div class="box">
<span class="xin" onclick="test(0)">♥</span>
<span class="xin" onclick="test(1)">♥</span>
<span class="xin" onclick="test(2)">♥</span>
<span class="xin" onclick="test(3)">♥</span>
<span class="xin" onclick="test(4)">♥</span>
</div>
<script>
let _xin = document.querySelectorAll('.xin');
function test(num) {
for (let i = 0; i < _xin.length; i++) {
if (i <= num) {
_xin[i].style.color = 'red'
} else {
_xin[i].style.color = 'black'
}
}
}
</script>
效果图