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

Question

我目前正在这里进行一个项目：https://github.com/Huy-jpg/images-transition

我需要帮助如何让一张图片的尺寸比另一张大。我写的函数不断给出"；无法读取null的classList；。

这是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')
// })
})
})

Answer 1

您的问题似乎是比较了错误的div。例如，当您单击最后一个图像时，这将中断。它将抛出该错误，因为它匹配e.target === image.firstElementChild，但没有image.nextElementSibling。

例如：

// index.html
...
<div className="images last-img">
<img
src="https://images.pexels.com/photos/1755243/pexels-photo-1755243.jpeg?cs=srgb&dl=pexels-zhaocan-li-1755243.jpg&fm=jpg"
alt="snow mountain"
height="700"
className="picture"
/>
<h1 className="heading4 heading">Snow Mountain</h1>
</div>

和

if (e.target === image.firstElementChild) {
console.log(
e.target,
image.firstElementChild,
image.nextElementSibling
);
if (image.nextElementSibling.classList.contains("box-active")) {
image.nextElementSibling.classList.remove("box-active");
}
}

在这种情况下，image是包装实际图像的div。当您检查匹配的事例e.target === image.firstElementChild时，因为firstElementChild是实际的img标记。问题是image.nextElementSibling为空，因为imagediv之后没有其他同级

react codesandbox 中的示例