0

私はこの小さなプラグインを機能させようとしていますが、現時点では立ち往生しています。これは、関数をプラグインに変換する最初の試みです。現在、機能していません。

jQuery.fn.overlay_AS = function(opts) {

            clickable_link.click(function(evt){
                evt.preventDefault();

                var overlay_content = $('#'+current_link);

                overlay.children().fadeOut(200).promise().done(function () {
                    overlay_content.fadeIn();
                });
                //don't need to make the overlay fadeIn every time
                if (!overlay.is(':visible')) overlay.fadeIn(); 
            });

            overlay.click(function(){
                overlay.fadeOut();
                overlay.children().fadeOut(500);
            });         

        };

        $('.p_wrapper p').click(function(){
            $('.p_wrapper p').overlay_AS({
                clickable_link:$(this), 
                current_link:$(this).attr('class'),
                overlay: $('#overlay')
            });
        });

HTML：

<div class="p_wrapper">

    <p class="one">Link 1</p>

    <p class="two">Link 2</p>

    <p class="three">Link 3</p>

</div>

<div id="overlay">

    <p id="one">You clicked on p1</p>

    <p id="two">You clicked on p2</p>

    <p id="three">You clicked on p3</p>

</div>

すべて、オーバーレイをフェードインし、クリックしたリンクに応じて異なるコンテンツをロードします。

4

2 に答える 2

2

プラグインを、選択した要素に作用する関数ではなく、通常の関数として処理しようとしていたようです。

プラグインコードをこれに変更すると、（私が思うに）必要なことが実行され、リンクのコンテナをすでに選択しているため、使用するオーバーレイを渡すだけで済みます。

jQuery.fn.overlay_AS = function(overlay) {   
    // hide overlay and bind event to fadeout overlays when clicked
    overlay.children().hide();
    overlay.click(function(){
        overlay.children().fadeOut(500);
    }); 

    // return $(this) to enable chaining
    return $(this).each(function() {   // loop so plugin can be applied to multiple elements
        $(this).find('p').click(function(evt){ // bind click to each p tag
            evt.preventDefault();
            var overlayId = $(this).attr('class'); // get the overlay id
            var selectedOverlay = $('#' + overlayId); // select the overlay to show

            // hide overlays then show selected overlay
            overlay.children().fadeOut(500).promise().done(function () {
                selectedOverlay.fadeIn();
            });
        });
    });            
};

$('.p_wrapper').overlay_AS($('#overlay')); // Select the wrapper

JSFiddleの例

私がお勧めするもう1つの変更dataは、クラスの代わりに属性を使用してオーバーレイを選択することです。

HTML：

 <p data-overlay-id="one">Link 1</p>

JS：

 var overlayId = $(this).data('overlay-id);
于 2013-02-15T13:19:36.240 に答える
0

リチャードの答えに加えて、これを読むことも役立つかもしれません：http: //docs.jquery.com/Plugins/Authoring#Getting_Started

于 2013-02-15T13:26:41.060 に答える