使用 JS 使同级 class 在点击时消失

Question

社区大家好，

我有这个 HTML:

<div class="containertira">
     <img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png">
     <div class="centered"> Minho</div>
</div>

我有一个 JS，当我点击 .imgclasstosize 时，它会将其更改为 img.imgclasstosize.big，同时将任何预先更改的 img.imgclasstosize.big 还原为 img.imgclasstosize。

这里是：

const allImages = document.querySelectorAll('.imgclasstosize');
allImages.forEach(el => {
  el.addEventListener('click', function(event) {
  
    const thisImg = event.target;
    const allOtherImages = Array.from(allImages).filter(img => {
       return img !== thisImg;
    });
  
    allOtherImages.forEach(img => {
        img.classList.remove('big')
    });
  
    thisImg.classList.toggle('big');
  
  });
});

我的问题是：是否可以在单击 .imgclasstosize 时也使它的同级 class 消失 .centered，并在 img.imgclasstosize.big 时将其恢复为可见回到 .imgclasstosize?

问题的第二部分是：我在 div“居中”中放入的任何内容都会阻止点击和后续操作，主要是在我的情况下，因为我在图像上方使用文本。因此，例如，如果我单击位于 .imgclasstosize 内的 img 上方的 .centered 内的文本，则不会发生任何操作。我怎样才能假设点击 .imgclasstosize 和点击 .centered 是同一件事？

Answer 1

可以使用nextElementSibling 属性来引用兄弟节点

您可以在此处阅读更多相关信息：https://www.w3schools.com/jsref/prop_element_nextelementsibling.asp

Answer 2

您需要使用 nextElementSibling 来切换类，您可以使用 CSS 隐藏它们。我已根据您的要求添加了额外的代码和评论。

const allImages = document.querySelectorAll('.imgclasstosize');
allImages.forEach(el => {
    el.addEventListener('click', function(event) {
      const thisImg = event.target;
      const sibling = thisImg.nextElementSibling; // Get the next sibling
      sibling.classList.toggle("hide"); // Add class to the current sibling

      const allOtherImages = Array.from(allImages).filter(img => {
        return img !== thisImg;
      });
      allOtherImages.forEach(img => {
        img.classList.remove('big');
        const otherSiblings = img.nextElementSibling;
        otherSiblings.classList.remove("hide"); // Remove hide class from other image siblings
      });
      thisImg.classList.toggle('big');


    });
  }

);

.containertira {
  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;
}

.imgclasstosize.big+.centered.hide {
  opacity: 0;
}

<div class="containertira">
  <img id="primeiraimagem" class="imgclasstosize" src="https://placehold.it/100x100">
  <div class="centered"> First image</div>
  <img id="primeiraimagem" class="imgclasstosize" src="https://placehold.it/100x100">
  <div class="centered"> Second image</div>
  <img id="primeiraimagem" class="imgclasstosize" src="https://placehold.it/100x100">
  <div class="centered"> Third image</div>
</div>

使用 JS 使同级 class 在点击时消失

Make sibling class disappear on click with JS

html

javascript

css

click

siblings