javascript - 使用点击事件 javascript 创建简单的星级评定

Question

我正在尝试仅使用 JavaScript 创建简单的星级评级系统。但不知道该怎么做。我只用 jquery 完成了它。有人可以帮忙吗

<div id='rating'>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
</div>

应将事件类添加到我单击的跨度中，如果单击前一个跨度，则应将其从前跨度中删除。

谢谢

这是我的 jquery 代码，它正在工作。如何将其转换为 js vanilla

var spansCounts =  $('#rating span').length
    $('#rating span').on('click', function(e) {
        console.log($(this).index())
        $('#rating span').removeClass('active');

        for(var i=0 ; i < $(this).index() + 1; i++){
            $('#rating span').eq(i).addClass('active')
        }
    })

Answer 1

您可以使用这个普通代码:

document.querySelector('#rating').addEventListener('click', function (e) {
    let action = 'add';
    for (const span of this.children) {
        span.classList[action]('active');
        if (span === e.target) action = 'remove';
    }
});

#rating { font-size: 0; }
#rating span { font-size: 40px; }
#rating span::before { content: "☆"; }
#rating span.active::before {content: "★"; }
#rating span:hover { cursor: pointer; }

<div id='rating'>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>