0

iframe からセレクターを一度だけ割り当てて、プラグイン全体で使用したい JQuery プラグイン関数があります。

以下の基本的な例では、プラグイン内に関数がある場合、関数内で明示的に設定しない限り、$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 に答える