jQuery hasClassおよびif

jQuery hasClassに問題があります。jQuery hasClassおよびif

$(document).ready(function() { 

var body = $('body'), 
    leftPane = $('.pane-left'); 

leftPane.on('click', function() { 

    body.removeClass('left-closed'); 
    body.addClass('left-open'); 
    $('.pane-left h2').fadeIn(600); 

    setTimeout(function() { 
     rightPane.fadeOut(0); 
     $('.pane-left-wrap').fadeIn(100); 
     $('.pane-left-wrap .secondary-nav li:first-child').fadeIn(100); 
     $('.pane-left-wrap .secondary-nav li:nth-child(2)').fadeIn(600); 
     $('.pane-left-wrap .secondary-nav li:nth-child(3)').fadeIn(1200); 
     $('.pane-left-wrap .secondary-nav li:nth-child(4)').fadeIn(1800); 
     $('.pane-left-wrap .secondary-nav li:nth-child(5)').fadeIn(2400); 
    }, 600); 

}); 

if(body.hasClass('left-open')) { 

    leftPane.on('click', function() { 

     body.removeClass('left-open'); 
     body.addClass('left-closed'); 
     $('.pane-left h2').fadeOut(600); 

    }); 

} 

});

クリックすると左ペイントと左ペインが自分のbodyタグに追加されます。次に私は再びクリックしますが、if（）内のコードに到達できません。何故ですか？

出典

2017-06-05 Damian Wójcik

「if」条件はページの読み込み時にのみ実行され、クリックがクラス「left-open」を追加した後ではありません。 – Matt

条件付きバインディングのかわりに、バインディング内の状態をチェックして、ロジックを実行するかどうかを確認します。または、可能であれば、それを子セレクタの一部として条件付きチェックを含むデリゲートバインディングに変更します。 – Taplar

hasClassの 'if'はクリックハンドラの中になければなりません。つまり、クリックハンドラを1つ持ち、クラス内でクラスをチェックしてください。 – Huangism

状態がdocument.readyの状態で1回だけ実行される場合は、clickイベントの場合は追加する必要があります。しかし、あなたはclickイベントでアクションを持っていると私はそれがあなたの目的のために正しいコードだと思う：

$(document).ready(function() { 

    var body = $('body'), 
     leftPane = $('.pane-left'); 

    leftPane.on('click', function() { 

     if(body.hasClass('left-open')) { 
      body.removeClass('left-open'); 
      body.addClass('left-closed'); 
      $('.pane-left h2').fadeOut(600); 
     } else { 
      body.removeClass('left-closed'); 
      body.addClass('left-open'); 
      $('.pane-left h2').fadeIn(600); 

      setTimeout(function() { 
       rightPane.fadeOut(0); 
       $('.pane-left-wrap').fadeIn(100); 
       $('.pane-left-wrap .secondary-nav li:first-child').fadeIn(100); 
       $('.pane-left-wrap .secondary-nav li:nth-child(2)').fadeIn(600); 
       $('.pane-left-wrap .secondary-nav li:nth-child(3)').fadeIn(1200); 
       $('.pane-left-wrap .secondary-nav li:nth-child(4)').fadeIn(1800); 
       $('.pane-left-wrap .secondary-nav li:nth-child(5)').fadeIn(2400); 
      }, 600); 
     } 
    }); 

});

出典

2017-06-05 15:17:22

移動クリックハンドラへ.left-openのチェックを。

$(document).ready(function() { 
    var body = $('body'), 
    leftPane = $('.pane-left'); 

    leftPane.on('click', function() { 

     // Added for check 'left-open' class. 
     if(!body.hasClass('left-open')) { 
      body.removeClass('left-closed'); 
      body.addClass('left-open'); 
      $('.pane-left h2').fadeIn(600); 

      setTimeout(function() { 
       rightPane.fadeOut(0); 
       $('.pane-left-wrap').fadeIn(100); 
       $('.pane-left-wrap .secondary-nav li:first-child').fadeIn(100); 
       $('.pane-left-wrap .secondary-nav li:nth-child(2)').fadeIn(600); 
       $('.pane-left-wrap .secondary-nav li:nth-child(3)').fadeIn(1200); 
       $('.pane-left-wrap .secondary-nav li:nth-child(4)').fadeIn(1800); 
       $('.pane-left-wrap .secondary-nav li:nth-child(5)').fadeIn(2400); 
      }, 600); 
     } 

     // Moved this function inside click event. 
     if(body.hasClass('left-open')) { 
      leftPane.on('click', function() { 
       body.removeClass('left-open'); 
       body.addClass('left-closed'); 
       $('.pane-left h2').fadeOut(600); 
      }); 
     } 
    }); 
});

出典

2017-06-05 15:21:02 Aman

既に不正な書式設定を使用している場合は、コード内で変更した内容を少なくとも説明してください。 – Christoph

必要に応じてコメントが追加されました。不便をおかけして申し訳ありません。 – Aman

これはあなたのシナリオに適しているようだ何あなたが（クリーンアップバージョン）を探していると.toggleClass();あるように聞こえます。

if ($('body').hasClass("left-open")) { 
    $('#leftPaneElem').click(function() { 

     body.toggleClass('left-closed'); 

      // more stuff 

    }); 
}

出典

2017-06-05 17:18:49

答えて

関連する問題