因此,我有6个图标,最初全部为灰色,但其中一个被视为选中图标。如果单击其他图标,则应启用该图标,而另一图标应变为灰色。我正在使用classList.toggle("selected");
进行更改,但没有得到想要的结果。这是代码。
的CSS
.selected {
color : #012b72;
}
的HTML
<i class="selected icon-toggle"></i>
<i class="icon-toggle"></i>
<i class="icon-toggle"></i>
<i class="icon-toggle"></i>
<i class="icon-toggle"></i>
<i class="icon-toggle"></i>
的JavaScript
icons=document.getElementsByClassName("icon-toggle");
for(i=0;i<icons.length;i++){
icons[i].addEventListener("click", function() {
this.classList.toggle("selected");
});
}
最佳答案
$(i).each(function(){
var $this = $(this);
$this.click(function(){
$(i).each(function() {
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}
});
$this.addClass("selected");
});
});