Блог

В настоящее время я работаю над проектом здесь: https://github.com/Huy-jpg/images-transition

И мне нужна помощь в том, как сделать так, чтобы только одно изображение имело больший размер, чем другое. Функция, которую я написал, продолжает выдавать «не удается прочитать список классов 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')
    // })
  })
})
 

Похоже, ваша проблема в том, что вы сравниваете неправильные divs. Это произойдет, например, при нажатии на последнее изображение. Он выдаст эту ошибку, потому что она совпадает 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=srgbamp;dl=pexels-zhaocan-li-1755243.jpgamp;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 это значение равно нулю, потому image что у div нет другого родственного элемента после него.

пример в react codesandbox