Доступ к тому же элементу в пределах jQuery наведения

Question

Мне трудно получить информацию в элементе, над которым я нахожусь, в пределах jQuery.

Они находятся внутри класса.

Фрагмент:

class ImageController {
	constructor() {
		this.$desktopHoverImage;
	}
	init() {
		this.$desktopHoverImage = $(".hover-image");
		this.attachListeners();
	}

	attachListeners() {
		for (var i = 0; i < this.$desktopHoverImage.length; i++) {
			$(this.$desktopHoverImage[i]).hover (
				 function() { console.log(this.$desktopHoverImage[i])},
				 function() { console.log(this.$desktopHoverImage[i])},
				// {
				// 	src :  $(this.$desktopHoverImage[i]).attr("src"),
				// },
				// this.hoverImageOn,
			)
		}
	}
	hoverImageOn(event) {
		console.log('we hovered');
		console.log(event.data.src);
	}
}

const imageController = new ImageController();
imageController.init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="featured-duo-product-img hover-image">
  <img 
    src="https://i.imgur.com/ep6fYaQ.png"
    class="duo-img"
    data-hover="https://i.imgur.com/Ukummry.jpg"
  />
</div>

Метод 1:

attachListener() {
    for (var i = 0; i < this.$desktopHoverImage.length; i++) {
        $(this.$desktopHoverImage[i]).hover (
        {
            test: $(this.$desktopHoverImage[i]).attr("src") // or any data element
        },
        this.hoverImageOn,
        )
    }
}

hoverImage(event) {
    // produces null no matter what I try and pass through
    console.log(event.data.test); 
}

Метод 2:

for (var i = 0; i < this.$desktopHoverImage.length; i++) { 
    $(this.$desktopHoverImage[i]).hover (
        function () { console.log(this.$desktopHoverImage[i]) }, 
        function () { console.log("hover exit") }
    )
}

Аналогичную проблему я решил с помощью первого метода. с $(elm).click( ... ), но, похоже, он не ведет себя должным образом при наведении курсора, и я не уверен, почему.

Answer 1

Дело в том, что ваш this.$desktopHoverImage - это div. Для доступа к желаемым атрибутам et c. вы должны смотреть на его дочерние элементы - изображения, потому что div не имеет атрибута src

class ImageController {
	constructor() {
		this.$desktopHoverImage;
	}
	init() {
		this.$desktopHoverImage = $(".hover-image");
		this.attachListeners();
	}

	attachListeners() {
    let images = this.$desktopHoverImage.children();
    console.log(images.length);
	for (var i = 0; i < images.length; i++) {
        var img = images[i];
			$(img).hover (
				 function() { console.log($(img).attr("src"))},
				 function() { console.log($(img).attr("data-hover"))},
				//{
				 //	src :  $(this.$desktopHoverImage[i]).attr("src"),
				 //},
				// this.hoverImageOn,
			)
		}
	}
	hoverImageOn(event) {
		console.log('we hovered');
		console.log(event.data.src);
	}
}

const imageController = new ImageController();
imageController.init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="featured-duo-product-img hover-image">
  <img 
    src="https://i.imgur.com/ep6fYaQ.png"
    class="duo-img"
    data-hover="https://i.imgur.com/Ukummry.jpg"
  />
</div>