Задать вопрос
egor_khramov
@egor_khramov
Верстальщик
javascript

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

Добрый вечер!
Имеется галерея изображений (не слайдер), при клике на одно из изображений должно появиться увеличенное с оверлеем. Выдает ошибку:
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()
      })
      
    })


Что это за ошибка?
  • Вопрос задан
  • 1511 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq 
$(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()

  })
})
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Так проблема решится?
let overlays = $('.overlays .overlay');
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправить ошибки в консольном интерфейсе с применением C# и NET
28 дек. 2024, в 22:21
500 руб./за проект
Сделать бота
28 дек. 2024, в 21:56
25000 руб./за проект
Доработка Битрикс
28 дек. 2024, в 18:50
1200 руб./в час
Ещё заказы