CSS 类添加/删除不再有效 || 香草JS

Question

So previously I asked your help to execute a behaviour for when clicking a container div, said div would change height, clicking it again would revert it back to normal, as would clicking a sibling container div.

I also added code for when clicking said div, the img inside would change data-src. This img div (not the container) has a sibling that is just text. It would change state through css, when the container div is clicked, a bit like the container div itself.

When adding the code for the data-src change, I lost this ability and cant find out why. Can you help me?

This is my code:

 const allImages = document.querySelectorAll('.containertira .imgclasstosize'); const allContainers = document.querySelectorAll('.containertira'); allContainers.forEach(el => { el.addEventListener('click', function(event) { const thisImg = el.querySelector('.imgclasstosize'); const thisTxt = el.querySelector('.centered'); const sibling = thisImg.nextElementSibling; // Get the next sibiling const bigSrc = thisImg.dataset.srcBig; const allOtherImages = Array.from(allImages).filter(img => { return img !== thisImg; }); const isBig = thisImg.classList.contains('big'); 1 if (isBig) { thisImg.classList.remove('big'); thisTxt.classList.remove('left'); // reset to the small image URL thisImg.src = thisImg.dataset.smallSrc; } else { // save the small image URL first: if (!thisImg.dataset.smallSrc) { thisImg.dataset.smallSrc = thisImg.src; } // change to the big image URL: thisImg.src = bigSrc; thisImg.classList.add('big'); thisTxt.classList.add('left'); sibling.classList.remove('hide'); } allOtherImages.forEach(img => { img.classList.remove('big'); // reset to the small image URL if (img.dataset.smallSrc) { img.src = img.dataset.smallSrc; } img.nextElementSibling.classList[isBig ? 'remove' : 'add']("hide"); }); }); } );

 .imgclasstosize{ width: 100%; object-fit: cover; position: relative; } img.imgclasstosize { height: 80px; border: 1px solid gray; transition : 1.5s all ease; } img.imgclasstosize.big { height: 100%; transition: 1.5s all ease; width: 70vw; margin-left: auto; } .containertira { position: relative; text-align: center; color: white; display: flex; justify-content: space-between; } .imgclasstosize { transition: all ease 0.5s; } .imgclasstosize.big { /* transform: scale(1.1); */ } .centered { opacity: 1; transition: all ease 0.5s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'blacker_pro_displayregular'; padding-top: 10px; /* background: linear-gradient(90deg, rgba(33,37,41,1) 0%, rgba(255,255,255,0) 50%); */ color: white; padding-left: 10px; padding-bottom: 6.5px; font-size: 5vh; display:block; pointer-events: none; } @media screen and (max-width: 960px) {.centered {font-size: 4.6vh;}} @media screen and (max-width: 500px) {.centered {font-size: 3.5vh;}} @media screen and (max-width: 375px) {.centered {font-size: 3vh;}} .centered.left{ top: 0%; left: 0%; transform: translate(0%, 0%); color: black; padding-left: 10px; padding-bottom: 6.5px; transition: all ease 0.5s; font-size: 7vh; } .imgclasstosize.big+.centered.hide { opacity: 0; }

 <div class="containertira"> <img id="primeiraimagem" class="imgclasstosize" src="//images.impresa.pt/expresso/2021-07-23-1---Minho.png-0c586cc8" data-src-big="//images.impresa.pt/expresso/2021-07-23-960px_minho.png-3938db2f"> <div class="centered">Minho</div> </div> <br> <div class="containertira"> <img id="primeiraimagem" class="imgclasstosize" src="//images.impresa.pt/expresso/2021-07-23-1---Minho.png-0c586cc8" data-src-big="//images.impresa.pt/expresso/2021-07-23-960px_minho.png-3938db2f"> <div class="centered">Minho</div> </div>

Best regards everyone.

Answer 1

I can't seem to reproduce your error. Tried copying your code and pasting it on a separated HTML file and everything worked.

If you execute this snippet and look at the console, you will see that the classes and properties are changing accordingly to your code.

Maybe your code is executing before some library causing it to not execute something?

 const allImages = document.querySelectorAll('.containertira .imgclasstosize'); const allContainers = document.querySelectorAll('.containertira'); allContainers.forEach(el => { el.addEventListener('click', function(event) { const thisImg = el.querySelector('.imgclasstosize'); const thisTxt = el.querySelector('.centered'); const sibling = thisImg.nextElementSibling; // Get the next sibiling const bigSrc = thisImg.dataset.srcBig; const allOtherImages = Array.from(allImages).filter(img => { return img !== thisImg; }); const isBig = thisImg.classList.contains('big'); 1 if (isBig) { thisImg.classList.remove('big'); thisTxt.classList.remove('left'); // reset to the small image URL thisImg.src = thisImg.dataset.smallSrc; } else { // save the small image URL first: if (!thisImg.dataset.smallSrc) { thisImg.dataset.smallSrc = thisImg.src; } // change to the big image URL: thisImg.src = bigSrc; thisImg.classList.add('big'); thisTxt.classList.add('left'); sibling.classList.remove('hide'); } allOtherImages.forEach(img => { img.classList.remove('big'); // reset to the small image URL if (img.dataset.smallSrc) { img.src = img.dataset.smallSrc; } img.nextElementSibling.classList[isBig ? 'remove' : 'add']("hide"); }); }); } );

 .containertira {border:1px black solid;}

 <div class="containertira"> <img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png"> <div class="centered">Minho</div> </div> <div class="containertira"> <img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png"> <div class="centered">Minho2</div> </div> <div class="containertira"> <img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png"> <div class="centered">Minho3</div> </div> <div class="containertira"> <img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png"> <div class="centered">Minho4</div> </div>