0

私は（非常に）jQueryを初めて使用するので、優しくしてください。ただし、以下の基本的なスクリプトを正しく機能させることができないようです。

ロードされたときのイミディエートクラスは.menuFlyoutであり、クリックすると必要に応じて変更されますが、元に戻すための2番目の部分は機能しません。noConflict（）は役に立ちません。

助けてくれてありがとう。

jQuery(document).ready(function() {
    jQuery('.menuFlyout').click(function(){
        jQuery('.menuFlyout').addClass('closeFlyout');
        jQuery('.menuFlyout').removeClass('menuFlyout');
    });
    jQuery('.closeFlyout').click(function(){
        jQuery('.closeFlyout').addClass('menuFlyout');
        jQuery('.closeFlyout').removeClass('closeFlyout');
    });
});
4

2 に答える 2

3

これで試してください

jQuery(document).ready(function() {
    jQuery(document).on('click','.menuFlyout', function(){
        jQuery('.menuFlyout').addClass('closeFlyout');
        jQuery('.menuFlyout').removeClass('menuFlyout');
    });
    jQuery(document).on('click','.closeFlyout', function(){
        jQuery('.closeFlyout').addClass('menuFlyout');
        jQuery('.closeFlyout').removeClass('closeFlyout');
    });
});

コードの問題はcloseFlyout、ハンドラーをアタッチするときにクラスを持つ要素がないことです。onメソッドを使用してクリック ハンドラーを委任する必要があります(詳細については、セクション「直接および委任されたイベント」を参照してください)。

イベント委任を使用すると問題が解決するはずですが、補足として、コードの 2 つの改善されたバージョンがあります (@wirey と @h0tw1r3 によって提案されています)。

jQuery(document).ready(function() {
    jQuery(document).on('click','.menuFlyout', function(){
        jQuery(this).addClass('closeFlyout').removeClass('menuFlyout');
    });
    jQuery(document).on('click','.closeFlyout', function(){
        jQuery(this).addClass('menuFlyout').removeClass('closeFlyout')
    });
});

また

jQuery(document).ready(function() {
    jQuery(document).on('click','.menuFlyout, .closeFlyout', function(){
        jQuery(this).toggleClass('closeFlyout');
        jQuery(this).toggleClass('menuFlyout');
    });
});
于 2013-01-03T15:09:39.173 に答える
1

クラス名のつづりが正しいかどうかを確認してください。firebug もチェックインします。次のようにして、機能するかどうかを確認します。

jQuery(document).ready(function() {
    jQuery('.menuFlyout').live('click',function(){
        jQuery('.menuFlyout').addClass('closeFlyout');
        jQuery('.menuFlyout').removeClass('menuFlyout');
    });
    jQuery('.closeFlyout').live('click',function(){
        jQuery('.closeFlyout').addClass('menuFlyout');
        jQuery('.closeFlyout').removeClass('closeFlyout');
    });
});

これが役立つことを願っています、ありがとう

于 2013-01-03T15:48:33.433 に答える