jQuery hasClass，如果

我有一個jQuery的hasClass問題。jQuery hasClass，如果

$(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); 

    }); 

} 

});

我單擊窗格中左和左開添加到我的身體標記。然後我再次點擊，但我的if（）內的代碼無法訪問。這是爲什麼？

來源

2017-06-05 Damian Wójcik

您的'if'條件只在頁面加載時執行，而不是在點擊添加'left-open'類後執行。 – Matt

而不是有條件地綁定，檢查綁定內部的狀態，以知道您是否應該執行該邏輯。或者，如果可能，將其更改爲委託綁定，將包含條件檢查作爲子選擇器的一部分。 – Taplar

hasClass的'if'應該在你的點擊處理程序中，這意味着你將有一個點擊處理程序並檢查你的類在裏面 – Huangism

如果條件只在document.ready狀態下運行一次，那麼您必須在您的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

jQuery hasClass，如果

回答

相關問題