Question

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

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

活跃的clas应该加到我点击的跨度上，＆amp;如果点击上一个跨度，则应从前跨距移除。

由于

这是我的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>

Answer 2

简单的香草JS解决方案如下：

＆＃13;

document.querySelector('#rating').addEventListener('click', function (e) {
    if (e.target.nodeName === 'SPAN') {
        var currentSibling = e.target;
        currentSibling.classList.add('active');
        while ((currentSibling = currentSibling.previousElementSibling)) {
            currentSibling.classList.add('active');
        }
    }
});

＆＃13;

#rating span.active {
  color: orange;
}

＆＃13;

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

＆＃13;

Answer 3

会有比这更好的解决方案，但你也可以这样做。见下文。

＆＃13;

var x=document.getElementsByTagName("span");
for(var i=0;i<x.length;i++){
  x[i].addEventListener("click",function(){
    var value=this.getAttribute("value");
    clearClass();
    for(var j=value-1;j>=0;j--){
      x[j].classList.toggle('a');
    }
  })
};

function clearClass(){
  var x=document.getElementsByTagName("span");
  for(var i=0;i<x.length;i++){
      //console.log(x[i].classList);
      x[i].classList.remove('a');
  };
}

＆＃13;

.a{
color:yellow;
}

＆＃13;

<div id='rating'>
  <span value='1'>*</span>
  <span value='2'>*</span>
  <span value='3'>*</span>
  <span value='4'>*</span>
  <span value='5'>*</span>
</div>

＆＃13;

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

3 个答案: