Почему не работает код jquery?

Question

[Clay]

Есть код

$(".gallery__list").mouseover(function(){
        let thumbnail = event.target.closest('#single_image');

        if (!thumbnail) return;
        showThumbnail(thumbnail.href, thumbnail.title);
        event.preventDefault();

        function showThumbnail(href, title) {
            largeImg.src = href;
            largeImg.alt = title;
        }
    });

И множество элементов html

spoiler

<div class="gallery__list">
                        <a href="images/gallery-img-1.png" class="galleru__item galleru__item-prem" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="" id="largeImg">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery" data-src="images/gallery-img-2.png">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                    </div>
<div class="gallery__list">
                        <a href="images/gallery-img-1.png" class="galleru__item galleru__item-prem" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="" id="largeImg">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery" data-src="images/gallery-img-2.png">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-1.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-1.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                        <a href="images/gallery-img-2.png" class="galleru__item" id="single_image" data-fancybox="gallery">
                            <img src="images/gallery-img-2.png" alt="">
                        </a>
                    </div>

Но если элемент один то все работает

Answer 1

[Сергей delphinpro]

Как-то так, примерно.
Никогда не используйте повторяющиеся ID. У вас именно с этим проблема. Ну не совсем с этим, но из-за этого вы не разглядели суть.

function showThumbnail($img, href, title) {
    $img.attr('src', href);
    $img.attr('alt', title);
}

$(".gallery__list").each(function($gallery){
    let $largeImg = $gallery.find('.galleru__item-prem');
    $gallery.mouseover(function(event){
        let thumbnail = event.target.closest('.galleru__item');
        if (!thumbnail) return;
        
        showThumbnail($largeImg, thumbnail.href, thumbnail.title);
    });
});

Хотя тут и jquery то не нужен

function showThumbnail(img, href, title) {
    img.src = href;
    img.alt = title;
}

document.querySelectorAll('.gallery__list').forEach(function(gallery){
    const largeImg = gallery.querySelector('.galleru__item-prem');
    if (!largeImg) console.warn('Нет большой картинки');
    gallery.addEventListener('mouseover', function(event){
        const thumbnail = event.target.closest('.galleru__item');
        if (!thumbnail) return;
        
        showThumbnail(largeImg, thumbnail.href, thumbnail.title);
    });
});

UPD

Comments

[Clay]

В первом варианте $gallery не является функцией

[Сергей delphinpro]

Clay, ага
вот так

$(".gallery__list").each(function(){
    const $gallery = $(this);
    let $largeImg = $gallery.find('.galleru__item-prem');
    ...

[Clay]

Ошибок нет, но не работает
Странно

[Сергей delphinpro]

Clay, хз, что у вас там не работает

Answer 2

[Алексей Ярков]

Вам никто не говорил, что id элементов не должны быть одинаковые? Само название атрибута как бы намекает на это ))

Comments

[Clay]

Даже еслди я буду обращаться к классу или к img, то тоже не поможет

[iljaGolubev]

$(".gallery__list").mouseover(function(){
        let thumbnail = event.target.closest('#single_image');
debugger;

откройте консоль
и смотрите что в event

[AUser0]

Clay, кроме уникальности ID, ещё не стоит делать определение функции внутри функции, которая вызывается при каждом движение мыши над нужным элементом. Вдогонку, переменная largeImg, используемая в showThumbnail(), вообще ни где не определена?

[Сергей delphinpro]

AUser0,

Вдогонку, переменная largeImg, используемая в showThumbnail(), вообще ни где не определена?

Она определена в html
Все атрибуты ID автоматически становятся глобальными переменными

<div id="variable"></div>
<script>
  console.log(variable);
</script>

Answer 3

[StiflerProger]

-let thumbnail = event.target.closest('#single_image');
+let thumbnail = $(this).find('#single_image');

и замени id на классы

Comments

[Clay]

Не работает (

[StiflerProger]

Clay, у тебя и твой старый код работает, проверил, всё ок

function showThumbnail(href, title) {
  console.log('я сработал', href, title);
  largeImg.src = href;
  largeImg.alt = title;
}

[Clay]

StiflerProger, Да в том и дело, что функция рабочая, но вот почему то src у img не заменяются

[Clay]

Если оставить только один блок с галереей, то заработает, если блоков несколько, то нет

[Сергей delphinpro]

Clay,

Если оставить только один блок с галереей, то заработает, если блоков несколько, то нет

Почему бы сразу не написать полную проблему?

[Clay]

Сергей delphinpro, Я написал, в конце

Но если элемент один то все работает

[StiflerProger]

Clay,
Если я правильно понял задачу, то вот

<div class="gallery__list">1
  <a href="images/gallery-img-1.png" class="galleru__item galleru__item-prem single_image" data-fancybox="gallery">
    <img src="images/gallery-img-1.png" alt="" class="largeImg">
  </a>
  <a href="images/gallery-img-1.png" class="galleru__item single_image" data-fancybox="gallery">
    <img src="images/gallery-img-1.png" alt="">
  </a>
   <a href="images/gallery-img-2.png" class="galleru__item single_image" data-fancybox="gallery">
    <img src="images/gallery-img-2.png" alt="">
  </a>
  <a href="images/gallery-img-3.png" class="galleru__item single_image" data-fancybox="gallery">
    <img src="images/gallery-img-3.png" alt="">
  </a>
</div>
<div class="gallery__list">2
  <a href="images/gallery-img-1.png" class="galleru__item galleru__item-prem single_image" data-fancybox="gallery">
    <img src="images/gallery-img-1.png" alt="" class="largeImg">
  </a>
  <a href="images/gallery-img-1.png" class="galleru__item single_image" data-fancybox="gallery">
    <img src="images/gallery-img-1.png" alt="">
  </a>
   <a href="images/gallery-img-2.png" class="galleru__item single_image" data-fancybox="gallery">
    <img src="images/gallery-img-2.png" alt="">
  </a>
  <a href="images/gallery-img-3.png" class="galleru__item single_image" data-fancybox="gallery">
    <img src="images/gallery-img-3.png" alt="">
  </a>
</div>

$(".gallery__list").mouseover(function () {
  const thumbnail = event.target.closest(".single_image");
  const largeImg = $(this).find('.largeImg');
  
  if (!thumbnail) return;
  
  largeImg[0].src = thumbnail.href;
  largeImg[0].alt = thumbnail.title;
});