Question

我有一个JQuery插件函数，我想从iframe分配一次选择器，然后在整个插件中使用它们。

在下面的基本示例中，如果我在插件中有一个函数，它将无法用于$ modal选择器，除非我在函数中明确设置它。

有没有办法做到这一点，以便我可以将选择器分配给变量一次，并在整个插件函数中访问它？

jQuery.customPlugin = function() {


    var $modal = $('#modal', frames['admin-bar'].document);


    $('#hide-modal').click(function(){

        hide_modal();

    });

    // doesn't work - but I want it to somehow
    function hide_modal(){

        $modal.hide();

    }

    // works, but requires lots of re-querying if I have lots of selectors/functions
    function hide_modal(){

        var $modal = $('#modal', frames['admin-bar'].document);
        $modal.hide();
    }

});

Answer 1

jQuery选择器在实例化它时查询DOM。换句话说，如果您执行var $foo = $('.bar')，然后向页面添加类“bar”的新元素，则$ foo变量将不包含它。这就是jQuery的工作原理。

你可以做的是编写一个get $ Modal方法，每次运行它时都会重新查询。例如：

function get$Modal() {
    return $('#modal', frames['admin-bar'].document);
}
// Should work
function hide_modal(){
    get$Modal().hide();
}

或者，您也可以在创建时“注册”您的模态，避免重新查询。类似的东西：

var $modals = $('.modal');// start with any existing modals
function createModal() {
    var $modal = generateModal();
    modals.add($modal); // add any newly created modals
}

// Should work
function hide_modal(){
    $modals.hide();
}

如果你有一个创建所有模态的公共位置，这应该会很有效。如果您在许多不同的地方创建模态，您可能希望使用自定义事件来组织事物：

var $modals = $('.modal');// start with any existing modals
$(document.body).on('newModal', function(e, $newModal) {
    $modals.add($newModal);
})

function createModalPlace1() {
    var $modal = generateModal();
    $(document.body).trigger('newModal', $modal)
}

function createModalPlace2() {
    var $modal = generateModalSomeOtherWay();
    $(document.body).trigger('newModal', $modal)
}

function createModalPlace3() { // etc.

将JQuery选择器分配给变量一次

1 个答案: