CODEWITHSUNDEEP
javascriptcssclassname
NikkIC
NikkIC

Reputation: 21

only one selected javascript clear class from other elements

I have a block of images that I use css and JavaScript to change the appearance on hover, and also want them to be selectable.

The main class of my images is "MAIN", they all display as grayscale, when they are clicked on they become "SELECTED" and are colored. I would like to be able to remove the class of "SELECTED" from any other image when the next one is clicked on, so that only 1 is selected / in color at any one time.

Here is an example of my code:

function SelAdobe() {
  document.getElementById("Adobe").className = "SELECTED";
  document.getElementById("AddSource").innerHTML = 'Add Adobe';
}
img.MAIN {
  width: 80px;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

img.MAIN:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

img.SELECTED {
  width: 80px;  
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
<a href="#" onClick="SelAdobe()">
  <img src="//lorempixel.com/80/80/cats/3" id="Adobe" class="MAIN">
</a>

Can I put somewhere in here to check and remove any previous images with the class "SELECTED" when any image is clicked on?

Upvotes: 1

Views: 56

Answers (3)

pete
pete

Reputation: 25091

Sure. Just remove the class from any image that has it in the line before you add the new SELECTED class.

function SelAdobe() {
  var selectedImages = document.querySelector("img.SELECTED");
  if (selectedImages) {
      selectedImages.classList.remove("SELECTED");
  }
  document.getElementById("Adobe").className = "SELECTED";
  document.getElementById("AddSource").innerHTML = 'Add Adobe';
}
img.MAIN {
  width: 80px;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

img.MAIN:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

img.SELECTED {
  width: 80px;  
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
<a href="#" onClick="SelAdobe()">
  <img src="//lorempixel.com/80/80/cats/3" id="Adobe" class="MAIN">
</a>

Upvotes: 1

Hitmands
Hitmands

Reputation: 14189

this should help you:

function onImageClick(event) {
  const selectedCls = 'selected';
  
  Array
    .prototype
    .forEach
    .call(document.querySelectorAll('#test .selectable'), (
      image => image !== event.target 
        ? image.classList.remove(selectedCls)
        : image.classList.add(selectedCls)
    ))
  ;
}

document
  .querySelector('#test')
  .addEventListener('click', (
    event => event.target.classList.contains('selectable') && 
    onImageClick(event)
  ))
;
.selectable {
  cursor: pointer;
  opacity: .3;
  transition: 300ms opacity linear;
}

.selectable:hover {
  opacity: .8;
}

.selectable.selected {
  opacity: 1;
}
<div id="test">
  <img class="selectable" src="http://lorempixel.com/50/50/sports/1" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/2" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/3" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/4" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/5" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/6" />
</div>

Upvotes: 0

Thijs
Thijs

Reputation: 2351

I've slightly changed your HTML structure, I've wrapped the images in a single div and use that to listen for the click event. It cuts down on the number of event listeners and if you want to change the method name you don't have to make numerous changes in your HTML.

Besides that, you can check if there is an item in the gallery with the SELECTED class and remove it from that element before assigning it to a new element. When there is no element with the SELECTED class, the querySelector method returns null so be sure to check for that.

const
  gallery = document.getElementById('gallery');
 
function onClickHandler(event) {
  if (event.target.tagName.toLowerCase() !== 'img') {
    return;
  }
  
  const
    selectedImage = gallery.querySelector('.SELECTED');
  if (selectedImage !== null) {
    selectedImage.classList.remove('SELECTED');
  }
  
  event.target.classList.add('SELECTED');
}
 
gallery.addEventListener('click', onClickHandler);
img.MAIN {
  width: 80px;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

img.MAIN:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

img.SELECTED {
  width: 80px;  
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
<div id="gallery">
  <img src="//lorempixel.com/80/80/cats/3" id="Cat1" class="MAIN">
  <img src="//lorempixel.com/80/80/cats/4" id="Cat2" class="MAIN">
  <img src="//lorempixel.com/80/80/cats/5" id="Cat3" class="MAIN">
</div>

Upvotes: 0

Related Questions