Uncaught TypeError: ...fadeIn is not a function?

Question

[Егор Храмов]

Добрый вечер!
Имеется галерея изображений (не слайдер), при клике на одно из изображений должно появиться увеличенное с оверлеем. Выдает ошибку:
Uncaught TypeError: overlays[$(...).index(...)].fadeIn is not a function
at HTMLDivElement. ((index):217)
at HTMLDivElement.dispatch (jquery-2.2.4.min.js:3)
at HTMLDivElement.r.handle (jquery-2.2.4.min.js:3)
Код оверлеев и галереи html:

<div class="overlays">
    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/1.jpg" alt="1">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/2.jpg" alt="2">
    </div>
    
    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/3.jpg" class="vertical" alt="3">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/4.jpg" class="vertical" alt="4">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/5.jpg" alt="5">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/6.jpg" alt="6">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/7.jpg" alt="7">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/8.jpg" class="vertical" alt="8">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/9.jpg" alt="9">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/10.jpg" class="vertical" alt="10">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/11.jpg" class="vertical" alt="11">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/12.jpg" class="vertical" alt="12">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/13.jpg" class="vertical" alt="13">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/14.jpg" class="vertical" alt="14">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/15.jpg" alt="15">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/16.jpg" alt="16">
    </div>
  </div>


  <div class="gallery">
    <div class="gallery-item">
      <img src="img/1.jpg" alt="1">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/2.jpg" alt="2">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/3.jpg" class="vertical" alt="3">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/4.jpg" class="vertical" alt="4">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/5.jpg" alt="5">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/6.jpg" alt="6">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/7.jpg" alt="7">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/8.jpg" class="vertical" alt="8">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/9.jpg" alt="9">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/10.jpg" class="vertical" alt="10">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/11.jpg" class="vertical" alt="11">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/12.jpg" class="vertical" alt="12">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/13.jpg" class="vertical" alt="13">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/14.jpg" alt="14">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/15.jpg" alt="15">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/16.jpg" alt="16">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>

  </div>

Код js (jquery):

$(window).load(function(){

      let overlays = document.querySelectorAll('.overlays .overlay')

      $('.close').click(function(){
        $('.overlay').fadeOut()
      })
    
      $('.gallery-item').click(function(){
        overlays[$(this).index()].fadeIn()
      })
      
    })

Что это за ошибка?

Answer 1

[ⓒⓢⓢ]

$(window).load(function(){
  /* В этой строке overlays у тебя будет NodeList (не jQ объект) */
  let overlays = document.querySelectorAll('.overlays .overlay')

  $('.close').click(function(){
    $('.overlay').fadeOut()
  })

  $('.gallery-item').click(function(){
    /* Тут у Node пытаешься вызвать jQ метод, которого соответственно нет */
    // overlays[$(this).index()].fadeIn()

    // Пробуй что-то такое
    let i = $(this).index()
    $(overlays[i]).fadeIn()

  })
})

Comments

[Егор Храмов]

Спасибо большое, получилось)

Answer 2

[Егор Живагин]

Так проблема решится?
let overlays = $('.overlays .overlay');

Comments

[ⓒⓢⓢ]

В событии клика вылетит исключение
// DomElement.fadeIn()