Question

我正在创建一个用于模态窗口内部元素的悬停效果（点击链接时出现模态窗口）。当你第一次将鼠标悬停在元素上时，一切都很好，但是，如果你关闭模态窗口然后重新打开它，悬停效果会变得很糟糕（因为它有时会起作用，但大多数时候效果会丢失）。

这是我的JavaScript

jQuery(document).ready(function($) {

    function modalFunc() {

        var mapModal = $('#map-modal');
        var closeModal = $('<span/>', {
            'class': 'close-modal',
            'text': 'X',
            'click': function() { mapModal.fadeOut(); }
        });

        function svgLoader() {
            var repFills = mapModal.find('path[fill=#00F71A]');
            var repBlanks = mapModal.find('path[fill=#00B609]');
            var stateModal = $('.state-modal');

            function hoverFunc() {
                var state = this.getAttribute('class');
                var qy = '.' + state + '.state-modal'; // jQuery selector
                this.setAttribute('stroke-width', 2);
                $(qy).appendTo(mapModal).fadeIn(200);
            }

            function unhoverFunc() {
                var state = this.getAttribute('class');
                var qy = '.' + state + '.state-modal';
                this.setAttribute('stroke-width', 0.5);
                stateModal.hide();
            }

            mapModal.prepend(closeModal).fadeIn();

            repFills.on('mouseover', hoverFunc).on('mouseout', unhoverFunc);

            repBlanks.on('mouseover', function() {
                this.setAttribute('stroke-width', 2);
               $('.state-modal.los-angeles').appendTo(mapModal).fadeIn(200);
            }).on('mouseout', function() {
                this.setAttribute('stroke-width', 0.5);
            });

        }

        mapModal.fadeIn().load('../images/namap600.svg', svgLoader);
    }

    $('#namerica').on('click', modalFunc);

});

我知道我之前遇到过这个问题，当使用带有.on（'click'）方法的$ .load方法时，要求你将该元素作为click方法中的第二个参数传递（.on（'单击'，元素，函数（）...）以免丢失任何功能，但是在这种情况下不能正常工作。如果有人能看到此代码中的错误，我将非常感谢您的回复。

感谢。

Answer 1

你可以做的是在jQuery中创建模态，然后在完成后创建.remove()。

var closeModal = $('<span/>', {
    'class': 'close-modal',
    'text': 'X',
    'click': function() { mapModal.fadeOut().remove(); }
});

我在模态中遇到了事件的丢失

1 个答案: