0

我有一个 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();
    }

});
4

1 回答 1

0

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.
于 2012-06-27T19:32:48.460 回答