Как правильно назначить ховер скриптом, чтобы после этого скрипт оставался рабочим?

Question

[Alex Ivanov]

Всем привет!
Ребята, немного запутался или не так написал.
Ситуация с гугл картой из-за её нагрузки на сайт.
Как правильно написать скрипт, чтобы после первого наведения на картинку карты сработал iframe(то есть, заработала карта) и после этого она не реагировала на ховер?

<div class="map-show" data-map-height="400" data-map="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1119.862144548339!2d37.53713118366424!3d55.85009906225264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b537bf9668ac29%3A0x18dfd9d5b810d58b!2z0JDQstGC0L7QvNC-0YLQvtGA0L3QsNGPINGD0LsuLCA00JAg0YHRgtGA0L7QtdC90LjQtSAyMSwg0JzQvtGB0LrQstCwLCDQoNC-0YHRgdC40Y8sIDEyNTQzOA!5e0!3m2!1sru!2sua!4v1553111377147">
                    <img src="img/footer/map.jpg" alt="map">
                </div>

$(".map-show").hover(function () {
        var map = $(this).attr("data-map");
        var map_width = $(window).width();
        var map_height = $(this).attr("data-map-height");
        $(this).css("height", map_height);
        if (map_width > window) { map_width = window; }
        $(this).html('<iframe src="' + map + '" width="' + map_width + '" height="' + map_height + '" frameborder="0" style="border:0" allowfullscreen></iframe>');
    });

Спасибо!

Answer 1

[Леонид Князев]

Метод .hover() в jQuery на самом деле вешает на элементе обработчики для двух событий: mouseenter и mouseleave.

Поэтому их можно отменить после первого срабатывания:
$(this).off('mouseenter mouseleave');

В вашем случае это будет вот так:

$(".map-show").hover(function () {
        var map = $(this).attr("data-map");
        var map_width = $(window).width();
        var map_height = $(this).attr("data-map-height");
        $(this).css("height", map_height);
        if (map_width > window) { map_width = window; }
        $(this).html('<iframe src="' + map + '" width="' + map_width + '" height="' + map_height + '" frameborder="0" style="border:0" allowfullscreen></iframe>');

        $(this).off('mouseenter mouseleave');
});

Comments

[Alex Ivanov]

Большое спасибо!
То что нужно!!!

Answer 2

[NepeinAndrey]

Можно использовать функцию one(), которая вызывает одно и то же событие на одном и том же элементе единожды, что более очевидно, чем просто снятие обработчика внутри него.

$(".map-show").one('mouseover', function() {
        var map = $(this).attr("data-map");
        var map_width = $(window).width();
        var map_height = $(this).attr("data-map-height");
        $(this).css("height", map_height);
        $(this).html(`<iframe src="${map}" width="${map_width}" style="border:0" allowfullscreen></iframe>`);
});