4

開発中のコンテンツ オーバーレイ スクリプトに問題があります。クロージング イベントが 2 回発生するようですが、1 回目 (またはクリックした開始リンクによっては 2 回目) は「未定義」を返します。

JSFiddle で簡素化された作業例を見つけることができます: http://jsfiddle.net/UhSLy/2/

1.をクリックしてから2. をクリックすると、最初に未定義のアラートが表示され、次にDummyが表示されます。

オープニングリンクを1つ削除すると、すべて正常に動作します。ただし、異なるオーバーレイを開くため、複数のリンクが必要です。

問題の原因と回避方法を教えてください。

編集: JSFiddle のコードは次のとおりです。

;(function ($, window, document, undefined) {

"use strict";

var pluginName = 'contentOverlay',
    defaults = {
        property:   'value'
    };

function Plugin(element, options) {
    this.element = element;
    this.$element = $(element);

    this.options = $.extend({}, defaults, options);

    this.init();
}

Plugin.prototype = {

    /**
     * Init
     */
    init: function () {
        var self = this;

        // Bind opening method
        this.$element.click(function() {
            self.open();
        });

        // Bind closing method
        $('#close').click(function() {
            self.close();
        });
    },

    /**
     * Open
     */
    open: function () {
        this.overlay = 'Dummy';
    },

    /**
     * Close
     */
    close: function () {
        alert(this.overlay); // <==== PROBLEM: fires twice. returns 'undefined' once
    },

};

$.fn[pluginName] = function (options) {
    return this.each(function () {
        if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName,
                new Plugin(this, options));
        }
    });
}

$(function () {
    $('.open').contentOverlay();
});

})(jQuery, window, document);

</p>

4

3 に答える 3

3 
$('#close').click(function() {
    self.close();
});

close()両方のオブジェクトメソッドをクローズ ハンドラーにバインドしています。基本的に、閉じるボタンをクリックすると、オーバーレイ オブジェクトごとに 1 つずつ、2 つの関数が実行されます。1 つのオーバーレイ オブジェクトが存在しないため、 が返されundefinedます。

この問題は次の方法で回避できます。

close: function () {
    if(this.overlay != undefined){ // Skips over the undefined overlays
        alert(this.overlay);
    }
}

デモ: http://jsfiddle.net/UhSLy/9/

于 2012-07-09T23:33:42.880 に答える
0

私がここで見ることを提案するかもしれないならば：http：//jsfiddle.net/PgbfN/25/

ifプラグインが初期化されているかどうかを確認するこの条件はundefined、2回実行されると思います。

解決するには、フラグを追加しました。isApplied適用したら、フラグをに設定しtrueます。残りの希望のデモが役立つ:)

それが役に立てば幸い

$.fn[pluginName] = function(options) {
        return this.each(function() {
            alert('me ==> ' + (!$.data(this, 'plugin_' + pluginName)) + " ==== " + $.data(this, 'plugin_' + pluginName));
            if (!isApplied) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));

            }
        });
    }

完全なコード

var isApplied = false;

(function($, window, document, undefined) {

    "use strict";

    var pluginName = 'contentOverlay',
        defaults = {
            property: 'value'
        };

    function Plugin(element, options) {
        this.element = element;
        this.$element = $(element);

        this.options = $.extend({}, defaults, options);
        isApplied = true;
        this.init();
    }

    Plugin.prototype = {

        /**
         * Init
         */
        init: function() {
            var self = this;

            // Bind opening method
            this.$element.click(function() {
                self.open();
            });

            // Bind closing method
            $(document).on('click', '#close', function() {
                alert('Close is clicked');
                //self.close(); //<<== Is called
            });
        },

        /**
         * Open
         */
        open: function() {
            this.overlay = 'Dummy';
        },

        /**
         * Close
         */
        close: function() {
            alert(this.overlay); // <==== PROBLEM: fires twice. returns 'undefined' once
        },

    };

   $.fn[pluginName] = function(options) {
        return this.each(function() {
            alert('me ==> ' + (!$.data(this, 'plugin_' + pluginName)) + " ==== " + $.data(this, 'plugin_' + pluginName));
            if (!isApplied) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));

            }
        });
    }

    $(function() {
        $('.open').contentOverlay();
    });

})(jQuery, window, document);
于 2012-07-09T23:49:13.210 に答える
0

私はこれを思いつきました（ここでの変更のみ）

open: function () {
        this.overlay = 'Dummy';
        this.opened=true;
},

$('#close').click(function() {
    if(self.opened) 
    {
        self.opened=false;
        self.close();
    }    
});

コードがすべてを説明していると思います。インスタンスが存在しない場合、closeイベントは発生しません。

デモ。

于 2012-07-10T00:13:32.307 に答える