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>×</span>
<img src="img1.jpg" alt="Tokyo1" />
</div>
<div class="imgContainer">
<span>×</span>
<img src="img2.jpg" alt="Tokyo2" />
</div>
<div class="imgContainer">
<span>×</span>
<img src="img3.jpg" alt="Tokyo3" />
</div>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">×</span>
<img src="https://via.placeholder.com/300" alt="Tokyo1" />
</div>
<div class="imgContainer">
<span class="invisible">×</span>
<img src="https://via.placeholder.com/300" alt="Tokyo2" />
</div>
<div class="imgContainer">
<span class="invisible">×</span>
<img src="https://via.placeholder.com/300" alt="Tokyo3" />
</div>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>×</span>
<img src="img1.jpg" alt="Tokyo1" />
</div>
<div class="imgContainer">
<span>×</span>
<img src="img2.jpg" alt="Tokyo2" />
</div>
<div class="imgContainer">
<span>×</span>
<img src="img3.jpg" alt="Tokyo3" />
</div>