js 星级评价

<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>

效果图