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，如果

回答

相关问题