Javascript:单击更改颜色并禁用其余图标

Question

所以我有 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");
   });
 }

Answer 1

 $(i).each(function(){
      var $this = $(this);
      $this.click(function(){
        $(i).each(function() {
          if($(this).hasClass("selected")){
            $(this).removeClass("selected");
          }
        });
        $this.addClass("selected");
      });
    });