javascript - 同一网站多次使用 jQuery 插件

Question

我确实有一些关于 jQuery 的基本知识，我正在尝试创建一个插件。在这种特殊情况下，它是一个正在呈现的下拉元素。

现在，当网站上只有一个下拉菜单时一切正常，但是当我有多个下拉元素时，它就不再工作了。

这是我如何激活插件的代码:

$('#OfficeUI .dropdown').each(function(index, item) {
    $(item).OfficeUIDropdown();
});

这是我的插件的完整源代码:

$.fn.OfficeUIDropdown = function() {
    var dropdownElement = $(this); 
    $.fn.selectedItem = ''; 


    $(dropdownElement).addClass('no-select'); // Adds a class that ensure that text-selection for this element is disabled.
    $(dropdownElement).append('<i class="fa fa-sort-desc"></i>'); 
    $.fn.hasFocus = function() { return dropdownElement.hasClass('focus'); };

    $.fn.isActive = function() { return dropdownElement.hasClass('active'); };

    $.fn.isMenuOpened = function() { return dropdownElement.hasClass('opened'); };

    $.fn.ToggleOpen = function() {
        // Check if the menu is opened or closed, based on that, hide or show the menu.
        if (dropdownElement.isMenuOpened()) {
            $('.elements', dropdownElement).hide();
            dropdownElement.removeClass('opened');
        } else {
            $('.elements', dropdownElement).show('slide', { direction: 'up' }, 100);
            dropdownElement.addClass('opened');
        }
    }

    dropdownElement.hover(function() {
        dropdownElement.addClass('focus');
    }, function() {
        if (!$(dropdownElement).is(':focus') && !dropdownElement.isMenuOpened()) {
            $(dropdownElement).removeClass('focus');
        }
    });

    dropdownElement.focusout(function() {
        dropdownElement.removeClass('active');
    });

    $('i', dropdownElement).click(function() {
        dropdownElement.ToggleOpen(dropdownElement);
    })

    $('.elements li', dropdownElement).click(function() {
        var selectedLiText = $(this).html();
        $('.legend', dropdownElement).html(selectedLiText);

        $.fn.selectedItem = selectedLiText; // Set a property to we know the item which has been selected.

        var attribute = dropdownElement.attr('data-on-change');
        if (typeof attribute !== 'undefined' && attribute != '') { eval(attribute); }

        dropdownElement.ToggleOpen();

        dropdownElement.removeClass('focus');
    });

    return this;
}

我知道这是一大堆代码，但我真的希望有人能帮我解决这个问题。欢迎任何有关如何改进此插件的想法。

这是一个 JsFiddle来证明问题。

尝试点击第一个下拉菜单的 A，然后第二个下拉菜单打开。我真的不明白。

Answer 1

由于 dropdownElement 在插件中的定义方式，当您调用其他函数时，dropdownElement 的定义已更改。您可以通过将函数声明绑定(bind)到特定范围 this 来解决这个问题。

$.fn.hasFocus = function() { return this.hasClass('focus'); };
$.fn.isActive = function() { return this.hasClass('active'); };
$.fn.isMenuOpened = function() { return this.hasClass('opened'); };
$.fn.ToggleOpen = function() {
    // Check if the menu is opened or closed, based on that, hide or show the menu.
    if (this.isMenuOpened()) {
        $('.elements', this).hide();
        this.removeClass('opened');
    } else {
        $('.elements', this).show();
        this.addClass('opened');
    }
}

实际操作 on JSFiddle .