js实现星级评分

<div id="star - rating">
    <span class="star" data - value="1">&#9733;</span>
    <span class="star" data - value="2">&#9733;</span>
    <span class="star" data - value="3">&#9733;</span>
    <span class="star" data - value="4">&#9733;</span>
    <span class="star" data - value="5">&#9733;</span>
</div>

#star - rating {
    display: flex;
}

.star {
    font - size: 24px;
    color: grey;
    cursor: pointer;
}

.star.filled {
    color: gold;
}

const stars = document.querySelectorAll('#star - rating .star');
let rating = 0;

stars.forEach(star => {
    star.addEventListener('mouseover', function () {
        const value = this.getAttribute('data - value');
        highlightStars(value);
    });

    star.addEventListener('click', function () {
        rating = this.getAttribute('data - value');
        // 这里可以将rating发送到服务器，例如使用fetch API
        console.log('用户评分为:', rating);
    });
});

function highlightStars(value) {
    stars.forEach(star => {
        if (star.getAttribute('data - value') <= value) {
            star.classList.add('filled');
        } else {
            star.classList.remove('filled');
        }
    });
}

// 初始化显示默认状态（全灰）
highlightStars(0);