CSS 類添加/刪除不再有效 || 香草JS

Question

因此，之前我請您幫助執行單擊容器 div 時的行為，說 div 會改變高度，再次單擊它會將其恢復正常，就像單擊同級容器 div 一樣。

我還添加了單擊該 div 時的代碼，里面的 img 會更改 data-src。 這個 img div（不是容器）有一個只是文本的兄弟。 當容器 div 被點擊時，它會通過 css 改變狀態，有點像容器 div 本身。

在為 data-src 更改添加代碼時，我失去了這種能力，無法找出原因。 你能幫助我嗎？

這是我的代碼：

 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>

最好的問候大家。

Answer 1

我似乎無法重現您的錯誤。 嘗試復制您的代碼並將其粘貼到單獨的 HTML 文件中，一切正常。

如果您執行此代碼段並查看控制台，您將看到類和屬性正在根據您的代碼進行相應更改。

也許你的代碼在某個庫之前執行，導致它不執行某些東西？

 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>