CSS类添加/删除不再工作||香草JS

Question

所以以前我要求你帮助执行一个行为，当点击一个容器div，说div会改变高度，再次点击它会恢复到正常，就像点击一个兄弟容器div。

我还添加了代码，当单击所述div时，其中的img将更改data-src。这个imgdiv(不是容器)有一个只是文本的兄弟。当容器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>