javascript - 刷新页面时 hasClass 不起作用

Question

我想说的是 body 是否有 x 类来添加 x 类。

Javascript

$('body').toggleClass('projectLoaded');
$('[data-type="projectLoader"]').click(function() {
  var proj = $(this)[0].getAttribute('data-project');
  $('#arrow-nav').addClass('slideIn');

  updateHash(proj);
  return false;
});
$('[data-type="projectDie"]').click(function() {

  $('body').removeClass('projectLoaded');
  $('#arrow-nav').removeClass('slideIn');
  return false;
});

if ($('body').hasClass('projectLoaded')) {
  $('#arrow-nav').addClass('slideIn');
} else {
  $('#arrow-nav').removeClass('slideIn');
}

当 projectLoaded 被触发时，addClass 确实为 slideIn 工作，但是当我刷新时，即使 projectLoaded 处于事件状态，addClass 消失。我认为 hasClass 可以工作，但事实并非如此。一切正常，但是，它只是在刷新时消失了。

工作页面 here ，单击一个项目，您将 #arrow-nav.slideIn 工作，但刷新并且 .slideIn 未添加。

更新这对我有用:

$( 'document' ).ready(function() {
        if ($('body').hasClass('projectLoaded')) {
            $('#arrow-nav').addClass('slideIn');
        } else {
            $('#arrow-nav').removeClass('slideIn');
        }
});

或

$( 'body.projectLoaded' ).ready(function() {
    $('#arrow-nav').addClass('slideIn');
});

如果这不合适或有更有效的方法，请在下面提交。

Answer 1

检查准备如下可能有帮助

$( document ).ready(function() {
    console.log( "ready!" );
    $('body').toggleClass('projectLoaded');
});

我的直觉告诉我这会起作用，但没有测试它。

$( 'body' ).ready(function() {
    console.log( "ready!" );
    $('body').toggleClass('projectLoaded');
});