リファクタリング後にJQuery関数が正しく機能しない

Question

私はJQuery（C＃）の新機能で、ここで間違っていることを見ることはできません。

私はハンバーガーメニューを切り替える次のJQueryを持っています。また、調子の効き目を入れて、Bodyへのスクロールを防ぎます。ハンバーガーは3本の水平線からXまでアニメートします。最初のJQuery（下）ではこれがうまくいきます。しかし、私はこれを洗練して、私のコードを2番目のJQueryにクリーンアップしようとしています。しかし、私がこれを行うと、ハンバーガーから離れて意図したように動作し、Xにはもはやアニメーション化されません。なぜなら、私の初心者のJQueryの目には、

また、私はまた、次のコード2行をしても、このような機能で必要とされるかどうかを知るのが大好きだ初心者のように：

e.preventDefault(); 

event.stopPropagation(); 

jQueryの（作品）：

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(function (e) { 
      event.stopPropagation(); 
      jQuery(this).toggleClass('active'); 
      jQuery('.menu ul').toggleClass('active'); 
      jQuery('.hamburger ul').toggleClass('active'); 
      jQuery('.dimmer').toggleClass('active'); 
      jQuery('body').toggleClass('no-scrolling'); 

      e.preventDefault();    
    }); 
}); 

はJQuery （動作しない）：

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(function(e) { 
    toggleNav(); 

    function toggleNav() { 
     event.stopPropagation(); 
     jQuery(this).toggleClass('active'); 
     jQuery('.menu ul').toggleClass('active'); 
     jQuery('.hamburger ul').toggleClass('active'); 
     jQuery('.dimmer').toggleClass('active'); 
     jQuery('body').toggleClass('no-scrolling'); 

     e.preventDefault(); 
    } 
    }); 
}); 

Answer 1

あなたにはいくつか問題があります。あなたは、clickイベントの内部で関数を定義し、それを直接呼び出していました。このため、this変数のスコープが間違っています。これは、#toggle-navをクリックするたびに、その関数が作成され、呼び出されてから破棄されることを意味します。クリックイベントの外に宣言すると、そのイベントは一度だけ作成され、クリックごとに再利用されます。 event.stopPropagation()も使用していましたが、使用している引数名はeでした。最後に、無名関数を.click関数に渡す必要はありません。あなたは名前で関数を渡すことができ、それは直接呼び出されます。

ここでは、これらの問題を解決するためにコードを少し整理しています。

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(toggleNav); 

    function toggleNav(e) { 
     e.stopPropagation(); 
     jQuery(this).toggleClass('active'); 
     jQuery('.menu ul').toggleClass('active'); 
     jQuery('.hamburger ul').toggleClass('active'); 
     jQuery('.dimmer').toggleClass('active'); 
     jQuery('body').toggleClass('no-scrolling'); 

     e.preventDefault(); 
    } 
}); 

また、匿名関数を使用することもできます。

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(function (e) { 
     jQuery(this).toggleClass('active'); 
     jQuery('.menu ul').toggleClass('active'); 
     jQuery('.hamburger ul').toggleClass('active'); 
     jQuery('.dimmer').toggleClass('active'); 
     jQuery('body').toggleClass('no-scrolling'); //Alternatively : jQuery(document.body) 

     return false; 
    }); 
}); 

eventとeの使用については、this linkを参照してください。基本的に、一部のブラウザではグローバルコンテキストにeventプロパティが存在します。つまり、あなたのコードはそれらのブラウザで機能するかもしれませんが、他のブラウザでは機能しなくなります。 Clickイベントは自動的にイベントを最初の引数として指定の関数に渡します。そのため、そこに直接ブラウザ間でアクセスできます。

最後の注意として、jQueryイベントreturn false;を使用すると、e.stopPropagation();とe.preventDefault();の両方が発生するので、falseを返す場合は、自分で呼び出す必要はありません。

jQuery source for reference

Answer 2

をあなたの元のコードでは、thisの値はを参照します#toggle-nav要素。改訂版では、thisはその親関数を参照しています。

Answer 3

あなたは、イベントリスナーのあなたの機能を移動する必要があります。

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(function(e) { 
    e.stopPropagation(); 
    toggleNav(); 
    e.preventDefault(); 
    }); 
}); 

function toggleNav() { 
    jQuery('#toggle-nav').toggleClass('active'); 
    jQuery('.menu ul').toggleClass('active'); 
    jQuery('.hamburger ul').toggleClass('active'); 
    jQuery('.dimmer').toggleClass('active'); 
    jQuery('body').toggleClass('no-scrolling'); 
} 

また、thisが変更されているため、関数に正しいセレクタが追加されました。あなたが望むなら、あなたはイベントターゲットを渡すことができます（e.target多分、私は頭の上を思い出すことができません）。あなたの最後の質問に答えるために、あなたは問題の2つの行ではないと思うが、すべてのコードを見ることなく、私は確かに言うことができない。