Question

0

199

Views

how to add condition removing a class -

I created a simple gallery with images resized on click and added "x" to image containers which remove the class (.bigger). However, I'm trying to figure out how to add another class (.invisible) that will remove "x" when the selected image has no class (.bigger). Can you help out a beginner coder?

How to make a condition: if an image DOES NOT have class .bigger, add class .invisible (to the cross)? I'm really grateful for any help.

const imgList = document.querySelectorAll("img");
const crosses = document.querySelectorAll(".imgContainer span");

for (let i = 0; i < imgList.length; i++) {
  imgList[i].addEventListener("click", function() {
    imgList.forEach((el) => el.classList.remove("bigger"));

    imgList[i].classList.add("bigger");
  });
}

for (let x = 0; x < crosses.length; x++) {
  crosses[x].addEventListener("click", function() {
    imgList.forEach((el) => el.classList.remove("bigger"));
    crosses[x].classList.remove("invisible");
  });
}

if (imgList[i].classList.contains("")) {
  crosses[x].classList.add("invisible");
}

img {
  width: 150px;
  height: 120px;
  object-fit: cover;
  margin: 0 1rem;
  opacity: 0.5;
  transition: all 0.2s;
}

img:hover {
  opacity: 1;
}

.imgContainer {
  position: relative;
}

.imgContainer span {
  position: absolute;
  top: -5px;
  right: 0;
  cursor: pointer;
  display: block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  text-align: center;
  line-height: 15px;
  font-size: 30px;
}

.bigger {
  width: 500px;
  height: auto;
  opacity: 1;
}

.invisible {
  display: none;
}

<div class="imgContainer">
  <span>&times;</span>
  <img src="img1.jpg" alt="Tokyo1" />
</div>
<div class="imgContainer">
  <span>&times;</span>
  <img src="img2.jpg" alt="Tokyo2" />
</div>
<div class="imgContainer">
  <span>&times;</span>
  <img src="img3.jpg" alt="Tokyo3" />
</div>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

const imgList = document.querySelectorAll("img");
const crosses = document.querySelectorAll(".imgContainer span");

for (let i = 0; i < imgList.length; i++) {
  imgList[i].addEventListener("click", function() {
    imgList.forEach((el) => el.classList.remove("bigger"));
    this.classList.add("bigger");
    changeAction();
  });
}

for (let x = 0; x < crosses.length; x++) {
  crosses[x].addEventListener("click", function() {
    imgList.forEach((el) => el.classList.remove("bigger"));
    this.classList.remove("invisible");
  });
}

function changeAction() {
  for (let i = 0; i < imgList.length; i++) {
    if (imgList[i].classList.contains("")) {
      crosses[x].classList.add("invisible");
    }
  }
}

img {
  width: 150px;
  height: 120px;
  object-fit: cover;
  margin: 0 1rem;
  opacity: 0.5;
  transition: all 0.2s;
}

img:hover {
  opacity: 1;
}

.imgContainer {
  position: relative;
}

.imgContainer span {
  position: absolute;
  top: -5px;
  right: 0;
  cursor: pointer;
  display: block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  text-align: center;
  line-height: 15px;
  font-size: 30px;
}

.bigger {
  width: 500px;
  height: auto;
  opacity: 1;
}

.invisible {
  display: none;
}

<div class="imgContainer">
  <span>&times;</span>
  <img src="img1.jpg" alt="Tokyo1" />
</div>
<div class="imgContainer">
  <span>&times;</span>
  <img src="img2.jpg" alt="Tokyo2" />
</div>
<div class="imgContainer">
  <span>&times;</span>
  <img src="img3.jpg" alt="Tokyo3" />
</div>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T07:59:22.263Z

If you iterate over the .imgContainer, you can more easily access the corresponding img and span.

Additionally, you can change the invisiblecss class to more specific .imgContainer span.invisible because .imgContainer span {display: block} would overwrite it.

const imgList = document.querySelectorAll(".imgContainer img");
const crossList = document.querySelectorAll(".imgContainer span");

document.querySelectorAll(".imgContainer").forEach((container) => {
  const img = container.querySelector("img");
  const cross = container.querySelector("span");

  img.addEventListener("click", function () {
    // Reset the classes of all images and spans.
    imgList.forEach((el) => el.classList.remove("bigger"));
    crossList.forEach((el) => el.classList.add("invisible"));
    // make the image bigger and show the cross.
    img.classList.add("bigger");
    cross.classList.remove("invisible");
  });

  cross.addEventListener("click", function () {
    img.classList.remove("bigger");
    cross.classList.add("invisible");
  });
});

img {
  width: 150px;
  height: 120px;
  object-fit: cover;
  margin: 0 1rem;
  opacity: 0.5;
  transition: all 0.2s;
}

img:hover {
  opacity: 1;
}

.imgContainer {
  position: relative;
}

.imgContainer span {
  position: absolute;
  top: -5px;
  right: 0;
  cursor: pointer;
  display: block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  text-align: center;
  line-height: 15px;
  font-size: 30px;
}
.imgContainer span.invisible {
  display: none;
}

.bigger {
  width: 500px;
  height: auto;
  opacity: 1;
}

<div class="imgContainer">
  <span class="invisible">&times;</span>
  <img src="https://via.placeholder.com/300" alt="Tokyo1" />
</div>
<div class="imgContainer">
  <span class="invisible">&times;</span>
  <img src="https://via.placeholder.com/300" alt="Tokyo2" />
</div>
<div class="imgContainer">
  <span class="invisible">&times;</span>
  <img src="https://via.placeholder.com/300" alt="Tokyo3" />
</div>

0

199

how to add condition removing a class -

2 answers

0

0

Find remote jobs

Andres GPT