CODEWITHSUNDEEP
javascripthtmlcssdom
Khacho
Khacho

Reputation: 301

Javascript: change color on click and disable rest icons

So I have 6 icons, initially all are grey except one which is treated as selected. If click on some other icon that icon should be enabled and the other one should be turned grey. I'm using classList.toggle("selected"); to change it but I'm not getting desired result. Here is the code.

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");
   });
 }

Upvotes: 0

Views: 1397

Answers (4)

Alex
Alex

Reputation: 158

Using your code, try with something like this:

icons = document.getElementsByClassName("icon");

for (i = 0; i < icons.length; i++) {

  icons[i].addEventListener("click", function() {

    for (i = 0; i < icons.length; i++) {
      icons[i].classList.remove('selected');
    }

    this.classList.toggle("selected");

  });

}
.selected {
  color: #012b72;
}
<i class="icon selected">A</i>
<i class="icon">B</i>
<i class="icon">C</i>
<i class="icon">D</i>
<i class="icon">E</i>
<i class="icon">F</i>

Link to JSFiddle: https://jsfiddle.net/usks0e9c/

Upvotes: 1

gyre
gyre

Reputation: 16787

Here is a vanilla JavaScript implementation:

var icons = document.querySelectorAll('.icon-toggle')

function deselect (icon) {
  icon.classList.remove('selected')
}

function selectThis () {
  icons.forEach(deselect)
  this.classList.add('selected')
}

icons.forEach(function (icon) {
  icon.addEventListener('click', selectThis)
})
/* contrast! */
.icon-toggle {
  color: #ccc;
}

.selected {
  color: #012b72;
}
<i class="selected icon-toggle">Icon</i>
<i class="icon-toggle">Icon</i>
<i class="icon-toggle">Icon</i>
<i class="icon-toggle">Icon</i>
<i class="icon-toggle">Icon</i>
<i class="icon-toggle">Icon</i>

Upvotes: 1

Rajesh
Rajesh

Reputation: 24925

You can try this.

Idea

  • Fetch all elements with icon-toggle and selected class.
  • Remove selected class from them excluding this.

  • Add selected class to current element.

    Pure JS

var icons=document.getElementsByClassName("icon-toggle")
for (i = 0; i < icons.length; i++) {
  icons[i].addEventListener("click", function() {
    var actives = document.querySelectorAll(".icon-toggle.selected");
    var selected = "selected";
    for(var i = 0; i < actives.length; i++){
      if(actives[i] !== this)
      actives[i].classList.remove(selected)
    }
    this.classList.toggle(selected);
  });
}
.icon-toggle {
  color: gray;
}

.selected {
  color: #012b72;
}
<i class="selected icon-toggle">icon 1</i>
<i class="icon-toggle">icon 2</i>
<i class="icon-toggle">icon 3</i>
<i class="icon-toggle">icon 4</i>
<i class="icon-toggle">icon 5</i>
<i class="icon-toggle">icon 6</i>

jQuery

$('.icon-toggle').on('click', function(){
  $(".icon-toggle.selected").not(this).removeClass('selected');
  $(this).toggleClass('selected')
})
.icon-toggle {
  color: gray;
}

.selected {
  color: #012b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i class="selected icon-toggle">icon 1</i>
<i class="icon-toggle">icon 2</i>
<i class="icon-toggle">icon 3</i>
<i class="icon-toggle">icon 4</i>
<i class="icon-toggle">icon 5</i>
<i class="icon-toggle">icon 6</i>

Upvotes: 1

Eva
Eva

Reputation: 173

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

Upvotes: 1

Related Questions