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

我正在尝试只使用javascript创建一个简单的明星评级系统。但我不知道怎么做。我只在jquery中做过。有人能帮忙吗

*
*
*
*
*

应将活动CLA添加到我单击的跨距上，如果单击了上一个跨距，则应将其从前跨距上删除

谢谢

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

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')
        }
    })

var spansconts=$（'#评级span'）。长度
$（“#评级范围”）。在（'click'，函数（e）上{
console.log（$（this.index（））
$（“#评级范围”）.removeClass（'active'）；
对于（var i=0；i<$（this）.index（）+1；i++）{
$（“#评级范围”）.eq（i）.addClass（'active'））
}
})

您可以使用以下常规代码：

document.querySelector（“#rating”）.addEventListener（'click'，函数（e）{
让动作='add'；
for（此项的const span.children）{
类列表[动作]（'active'）；
如果（span==e.target）操作='remove'；
}
});
#评级{字体大小：0；}
#分级范围{字体大小：40px；}
#评级范围：：在{内容：}之前☆"; }
#额定值span.active:：在{content:★"; }
#评级范围：悬停{光标：指针；}
您可以使用以下常规代码：


document.querySelector（“#rating”）.addEventListener（'click'，函数（e）{
让动作='add'；
for（此项的const span.children）{
类列表[动作]（'active'）；
如果（span==e.target）操作='remove'；
}
})；
#评级{字体大小：0；}
#分级范围{字体大小：40px；}
#评级范围：：在{内容：}之前☆"; }
#额定值span.active:：在{content:★"; }
#评级范围：悬停{光标：指针；}
下面是一个简单的香草JS解决方案：


document.querySelector（“#rating”）.addEventListener（'click'，函数（e）{
如果（e.target.nodeName=='SPAN'）{
var currentSibling=e.target；
var nextSibling=e.target；
currentSibling.classList.add（'active'）；
而（（currentSibling=currentSibling.previousElementSibling））{
currentSibling.classList.add（'active'）；
}
而（（nextSibling=nextSibling.nextElementSibling））{
nextSibling.classList.remove（'active'）；
}
}
})；
#额定值span.active{
颜色：橙色；
}
#额定跨度{
字体大小：42px；
光标：指针；
}

*
*
*
*
*
下面是一个简单的香草JS解决方案：


document.querySelector（“#rating”）.addEventListener（'click'，函数（e）{
如果（e.target.nodeName=='SPAN'）{
var currentSibling=e.target；
var nextSibling=e.target；
currentSibling.classList.add（'active'）；
而（（currentSibling=currentSibling.previousElementSibling））{
currentSibling.classList.add（'active'）；
}
而（（nextSibling=nextSibling.nextElementSibling））{
nextSibling.classList.remove（'active'）；
}
}
})；
#额定值span.active{
颜色：橙色；
}
#额定跨度{
字体大小：42px；
光标：指针；
}

*
*
*
*
*
有比这更好的解决方案，但您也可以这样做。请参见下文


var x=document.getElementsByTagName（“span”）；
对于（变量i=0；i=0；j--）{
x[j].classList.toggle（'a'）；
}
})
};
函数clearClass（）{
var x=document.getElementsByTagName（“span”）；
对于（var i=0；i有比这更好的解决方案，但您也可以这样做。见下文


var x=document.getElementsByTagName（“span”）；
对于（变量i=0；i=0；j--）{
x[j].classList.toggle（'a'）；
}
})
};
函数clearClass（）{
var x=document.getElementsByTagName（“span”）；
对于（var i=0；我是否编写了javascript代码？您是否有一个工作的jquery实现并希望将其转换为与香草API一起工作（没有jquery）？您的jquery甚至没有那么好。
$（'#rating'）。on（'click'，'>span'，function（）{var clicked=$（this）；clicked.nextAll（）.removeClass（'active'）；clicked.prevAll（）.addBack（）.addClass（'active'）；console.log（clicked.index（））；}）
您是否编写了任何javascript代码？您是否有一个工作的jquery实现，并希望将其转换为使用普通API（没有jquery）？您的jquery甚至没有那么好。
$（'#rating'）。on（'click'，'>span'，function（）{var clicked=$（此）；clicked.nextAll（）.removeClass（'active'）；clicked.prevAll（）.addBack（）.addClass（'active'）；console.log（clicked.index（））；}）；
稍微美化了你的答案。这样的星级也可以只用CSS来完成。哈哈，@connexo，我看你玩得很开心。谢谢！；-）把你的答案美化了一点。像这样的星级评定也可以只用CSS来完成。哈哈，@connexo，我看你玩得很开心。谢谢！；-）有了在答案中直接添加可执行代码片段的能力，就不必求助于JSFIDLE，只需说一句。谢谢你的反馈，有了这些代码，用户只能增加用户的数量活跃的星星。也许有些网站希望有这样的限制：p该代码不能正常工作，用户不能减少星星：）@Phd.BurakÖztürk我已经解决了这个问题。请现在尝试。由于能够在答案中直接添加可执行代码片段，不需要求助于JSFIDLE，只需说一句。感谢您对该问题的反馈是代码用户只能增加活动星星的数量。也许有些网站希望有这样的限制：p此代码不能正常工作，用户不能减少星星：）@Phd.BurakÖztürk我已经解决了这个问题。请现在再试。