JavaScript不会隐藏文本，只隐藏图像

Question

我的JavaScripts有问题，它旨在显示选项卡库。当我选择另一个图库时，它会隐藏图像，但我也有一个演示文本，称为"；文本poze"；当我选择另一个图库时，这是不隐藏的，所以当选择相册2时，将看到相册1中的文本。我该怎么解决？

function album() { // wrap code in IIFE to keep it from global scope
let links = document.querySelectorAll('a'); // grab all <a> tags that trigger the image gallery
let imageContainer = document.querySelector('.album1 '); // grab the div that will contain the images
let imagesCollection = document.querySelectorAll('.img-prezentare');

function displayImage(imgs, album) { // function to check the data-album attr and check against the button that was clicked
imgs.forEach((image) => {
if (image.dataset.album == album) {
//image.classList.remove('hide');
image.hidden = false;
} else {
//image.classList.add('hide');
image.hidden = true;
}
});
}

links.forEach((link) => { // loop through <a> tags and create click event on each 
link.addEventListener('click', (e) => {
e.preventDefault();
console.log(link.textContent);
if (link.textContent == "album 1") {
console.log("album 1111111s");
}
switch (link.textContent) { // check name of link clicked 
case "album 1": // link 1 text
displayImage(imagesCollection, 'album 1'); //display images from album 1
console.log("album 1111111s");
break;
case "album 2": // link 2 text
displayImage(imagesCollection, 'album 2'); //display images from album 2
break;
case "album 3": // link 3 text
displayImage(imagesCollection, 'album 3'); //display images from album 3
break;
case "all": // // link 4 text - display all images at once
imagesCollection.forEach((image) => {
image.classList.remove('hide');
});
break;
}
});
});
}
window.onload = function() {
album()
};

<div class="selector text-center justify-content-evenly">
<a href="#">album 1</a>
<a href="#">album 2</a>
<a href="#">album 3</a>
<a href="#">all</a>
</div>
<div class="row justify-content-evenly">
<div class="col-md-4 center album1">
<a href="adrbirouri.html"> <img class="img-prezentare" src="../ADR Birouri/View05.jpg" data-album="album 1"></a>
<div class="text-poze"> ADR Birouri </div>
</div>
<div class="col-md-4 center album1">
<a href="baiamare.html"><img class="img-prezentare" src="../Bloc Baia Mare/View05.jpg" data-album="album 1"></a>
<div class="text-poze"> Bloc Baia Mare</div>
</div>
<div class="col-md-4 center album1">
<a href="nisipari.html"><img class="img-prezentare" src="../Bloc Nisipari/View01.jpg" data-album="album 1"></a>
<div class="text-poze">Bloc Nisipari</div>
</div>
</div>

Answer 1

您的代码似乎没有达到预期效果，也没有达到您所描述的

我建议你授权，你可能想这样做：

window.addEventListener("DOMContentLoaded", () => {
const nav = document.querySelector(".selector")
const links = nav.querySelectorAll("a");
const albums = document.querySelectorAll(".album");
nav.addEventListener("click", e => {
const tgt = e.target.closest("a");
if (tgt) { 
links.forEach(lnk => lnk.classList.toggle("active",lnk===tgt));
albums.forEach(album => album.hidden = ![album.id, "all"].includes(tgt.dataset.album));
}
})
});

.selector a  {text-decoration: none }
.selector a.active  {text-decoration: underline }
.album img { height: 100px;}

<div class="selector text-center justify-content-evenly">
<a href="#" data-album="album1" class="active">album 1</a>
<a href="#" data-album="album2">album 2</a>
<a href="#" data-album="album3">album 3</a>
<a href="#" data-album="all">all</a>
</div>
<div class="row justify-content-evenly">
<div class="col-md-4 center album" id="album1">
<a href="adrbirouri.html"> <img class="img-prezentare" src="https://www.wall-street.ro/image_thumbs/thumbs/734/7342c107fcfac43c575acfe686ece344-1063x560-00-86.jpg?v=1469023098"></a>
<div class="text-poze"> ADR Birouri </div>
</div>
<div class="col-md-4 center album" id="album2" hidden>
<a href="baiamare.html"><img class="img-prezentare" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Baia_Mare-_centru_istoric.jpg"></a>
<div class="text-poze"> Bloc Baia Mare</div>
</div>
<div class="col-md-4 center album" id="album3" hidden>
<a href="nisipari.html"><img class="img-prezentare" src="https://static.wikia.nocookie.net/genealogy/images/4/45/Scoala_Nisipari.jpg/revision/latest/scale-to-width-down/250?cb=20120804221616"></a>
<div class="text-poze">Bloc Nisipari</div>
</div>
</div>