提问者:小点点

这个的含义。$POP


站点Read-city在文件Read-City-Online store of Books_Files\Popup.js.untitled中使用函数function Popup(pop,name,html,handlers),该函数创建了一个登录/注册窗口(参见

null

    function Popup (pop, name, html, handlers) {
        if (html) {
            $(document.body).append(html);
        }
        handlers = handlers || {};
        this.$pop = $(pop);
        this.selector = pop;
        this.name = name;
        this.$pop_wrapper = this.$pop.parent('.js__popup_main_wrapper');

        Popup.instances[this.name] = this;
        this.$pop.on('click', '.popup__close, .js__popup__close', this.hide.bind(this));

        //Закрытие попапа при клике на маску и при нажатии Esc
        if (this.$pop_wrapper) {
            this.$pop_wrapper.on('click', function(event) {
                var mask_wrapper = event.target;
                if (mask_wrapper.classList.contains('js__popup_main_wrapper')) {
                    Popup.hideAll();
                }
            });
        }

        $(document).keyup(function(event) {
            if (event.keyCode === 27) {
                Popup.hideAll();
            }
        });

        this.$body = this.$pop.find('.popup__body_text');

        this.onshow = handlers.show || null;
        this.onhide= handlers.hide || null;

        this.events = {
            closePopup: 'closePopup',
            openPopup: 'openPopup'
        }
    }

    Popup.instances = {};

    Popup.getInstance = function(name, pop, html, handlers) {
        if(Popup.instances[name]){
            return Popup.instances[name];
        }

        if (pop){
            return new Popup(pop, name, html, handlers);
        }
        return null;
    };
    Popup.hideAll = function() {
        for (var popupName in Popup.instances) {
            if(Popup.instances.hasOwnProperty(popupName)){
                Popup.instances[popupName].hide();
            }
        }
    };

    Popup.prototype.show = function() {
        Popup.hideAll();

        //Скрываем скролл
        $('body').css('overflow', 'hidden');
        // временный костыль
        // почему-то не всегда инициализируется dom-элемент попапа
        if (!this.$pop.length) this.$pop = $(this.selector);
        if (!this.$pop.length) return;

        if (this.$pop_wrapper) {
            this.$pop_wrapper.css("display", "flex");
        }

        this.$pop
            .removeClass('hidden')
            .addClass('shown')
            .attr('data-opened', '');
        this.onshow ? this.onshow() : null;

        if (window.userCity && window.userCity.hideBlock) { //если открыт попап города(актуально для мобильной версии)
            //то закрыть блок выбора города
            window.userCity.hideBlock();
        }

        //создадим событие открытия попапа
        eventEmitter.dispatch(this.events.openPopup, {
            popupName: this.name,
            popup: this.$pop
        });
    };

    Popup.prototype.hide = function() {
        this.$pop
            .removeClass('shown')
            .addClass('hidden')
            .removeAttr('data-opened');
        this.onhide ? this.onhide() : null;

        if (this.$pop_wrapper) {
            this.$pop_wrapper.fadeOut(50);
        }

        var opened = $('[data-opened]').length;

        if (opened === 0) {
            //Возвращаем скролл
            $('body').css('overflow', 'auto');
        }

        eventEmitter.dispatch(this.events.closePopup, {
            popupName: this.name,
            popup: this.$pop
        });
    };

    Popup.prototype.setBodyText = function (text){
        if(!text){
            return;
        }

        this.$body.html(text);
    };

null

解释

  1. pop属性
  2. 的含义
  3. 操作this.$pop=$(pop)
  4. 以及this.$pop.on('click','.popup__close,.js__popup__close',this.hide.bind(this));的语法也不清楚。

共2个答案

匿名用户

1)pop属性的含义

它就是有人给财产起的任何名字。听起来像是弹出弹出的简称。但是变量名可以是任何。。。。

2)操作员的操作this.$pop=$(pop)

它接受jQuery对象返回并将其放入属性中。在变量名中使用$来表示它是一个jQuery对象而不是DOM引用并不少见。

3)并且this.$pop.on('click','.popup__close,.js__popup__close',this.hide.bind(this))的语法也不清楚。

这是jQuery用于附加事件侦听器的基本语法https://api.jQuery.com/on

匿名用户

很快,这里就是我对这个问题的看法,只是看看您提供的代码。

>

  • 我认为pop是html字符串选择器/html元素/jQuery元素。

    该操作应该是创建jQuery元素的实例。这个元素将有助于与jQuery“框架”下的popHTML元素进行交互。快速jQuery教程:https://www.w3schools.com/jQuery/

    它是jQuery框架的一部分。它使用on方法绑定事件,而不是AddEventListener。https://api.jquery.com/on/

    查看其余代码,我非常确定它使用的是jQuery。