我正在尝试建立一个星级评分系统,我有这个代码,我想对它进行一些更改,在用户点击星星后它会显示一个警报,显示有多少个星星,它会重置颜色,我想要的是在用户点击它之后停留的颜色,并用星空下的div替换警报,这是我的代码：

$(function() {
    $("div.star-rating > s,div.star-rating-rtl > s").on("click",function(e) {
        var numStars = $(e.target).parentsUntil("div").length+1;
        alert(numStars + (numStars == 1 ? " star" : " stars!"));
    });
});

.star-rating s:hover {
    color: red;
}
.star-rating-rtl s:hover {
    color: red;
}

.star-rating s,.star-rating-rtl s {
    color: black;
    font-size: 50px;
    cursor: default;
    text-decoration: none;
    line-height: 50px;
}
.star-rating {
    padding: 2px;
}
.star-rating-rtl {
    background: #555;
    display: inline-block;
    border: 2px solid #444;
}
.star-rating-rtl s {
    color: yellow;
}
.star-rating s:hover:before,.star-rating s.rated:before {
    content: "\2605";
}
.star-rating s:before {
    content: "\2606";
}
.star-rating-rtl s:hover:after,.star-rating-rtl s.rated:after{
    content: "\2605";
}
.star-rating-rtl s:after {
    content: "\2606";
}