Javascript 如何在下一个/上一个元素中隐藏/显示？_Javascript_Html_Sass

Javascript 如何在下一个/上一个元素中隐藏/显示？

javascript html sass

Javascript 如何在下一个/上一个元素中隐藏/显示？,javascript,html,sass,Javascript,Html,Sass,我目前正在这里从事一个项目：我需要关于如何使一个图像的大小大于另一个图像的帮助。我编写的函数一直在给出“无法读取null的类列表” 以下是js： const images = document.querySelectorAll('.images'), headings = document.querySelectorAll('.heading'); images.forEach(image =>{ image.addEventListener('click', (e

我目前正在这里从事一个项目：

我需要关于如何使一个图像的大小大于另一个图像的帮助。我编写的函数一直在给出“无法读取null的类列表”

以下是js：

const images = document.querySelectorAll('.images'),
      headings = document.querySelectorAll('.heading');

images.forEach(image =>{
  image.addEventListener('click', (e) =>{
    image.classList.toggle('box-active')

    if(e.target === image.firstElementChild){
      if(image.nextElementSibling.classList.contains('box-active')){
        image.nextElementSibling.classList.remove('box-active')
      }
    }
    if(e.target === image.lastElementChild){
      if(image.previousElementSibling.classList.contains('box-active')){
        image.previousElementSibling.classList.remove('box-active')
      }
    }

    // headings.forEach(heading =>{
    //   heading.classList.toggle('letter-active')
    // })
  })
})

您的问题似乎是比较了错误的div。例如，当您单击最后一个图像时，此操作将中断。它将抛出该错误，因为它匹配

e.target==image.firstElementChild

，但没有

image.nextElementSibling

例：

在这种情况下，

image

是包装实际图像的div。当您检查匹配的大小写

e.target==image.firstElementChild

时，因为

firstElementChild

是实际的

img

标记。问题是

image.nextElementSibling

为空，因为

image

div后面没有其他同级