0

同じ関数で jQuery によって作成された要素を削除するのに問題があります。何が起こっているかは次のとおりです。

サイド パネルを開き、ページの残りの部分 (パネルを除く) に適用されるオーバーレイ要素を作成する jQuery 関数 (toggleClick) を作成しました。ユーザーがオーバーレイをクリックすると、パネルが閉じられ、オーバーレイ要素も削除されます。ここで何か間違ったことをしていますか？

jQuery コード:

jQuery(document).ready(function(){
    /* DEFINE TOGGLECLICK */
    $.fn.toggleClick=function(){
        var functions=arguments
        return this.click(function(){
            var iteration=$(this).data('iteration')||0
            functions[iteration].apply(this,arguments)
            iteration= (iteration+1) %functions.length
            jQuery(this).data('iteration',iteration)
        })
    }
    /* DEFINE APANEL ID */
    var aPanel = "#aPanel";
    /* DEFINE APANEL FUNCTIONALITY */
    jQuery('#apanel-fire,#aPanelOverlay').toggleClick(function() {
        jQuery("body").addClass("active");
        jQuery(aPanel).addClass("active");
        jQuery("<div id='aPanelOverlay'></div>").appendTo(".page");
    }, function() {
        jQuery("body").removeClass("active");
        jQuery(aPanel).removeClass("active");
        jQuery("#aPanelOverlay").remove();
    });
});

/* DEFINE APANEL FUNCTIONALITY */ は、私が問題を抱えている場所です。上記以外はすべて、toggleClick 関数と aPanel 変数 ID を定義しています。

画面の左上にある[メニュー]ボタンをクリックすると、私が抱えている問題のライブ バージョンを以下で見ることができます。

ライブバージョン:

http://iamaaron.com/alpha/

どうもありがとう！

4

1 に答える 1

1

まず、jQuery('#apanel-fire,#aPanelOverlay').toggleClick後でアタッチされるため、オーバーレイは存在しません。そのため、クリック ハンドラがなく、どのクリックにも反応しません。

2 つ目 (これはもはや問題ではありません ;)return this.click(function(){は、各要素にクリック ハンドラーをアタッチします。最初のクリックでオンjQuery(this).data('iteration',iteration)を保存します。オーバーレイをクリックすると、まだ 0 のままです。そのため、最初の関数が再度呼び出されます。iteration#apanel-fireiteration

更新：非常に単純な解決策

   function showOverlay() {
        jQuery("body").addClass("active");
        jQuery(aPanel).addClass("active");
        jQuery("<div id='aPanelOverlay'></div>").appendTo(".page").click(hideOverlay);
    }
    function hideOverlay() {
        jQuery("body").removeClass("active");
        jQuery(aPanel).removeClass("active");
        jQuery("#aPanelOverlay").remove();
    }

   jQuery('#apanel-fire').click(showOverlay);
于 2013-06-27T19:15:05.460 に答える