刷新页面时hasClass不起作用

hasClass is not working when page is refreshed

本文关键字：hasClass 不起作用 刷新      更新时间：2023-09-26

我想说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会起作用，但事实并非如此。一切正常，但它只是在刷新时就消失了。

在此处的工作页面上，单击一个项目，您将使用#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');
});

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

如下检查准备情况可能有助于

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

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

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

$（'body'）.thoggleClass（'projectLoaded'）是在检查hasClass条件后执行的函数loadProject（）中给定的。因此，在将类"projectLoaded"添加到主体中之前，将执行hasClass条件，因此不会添加类"slideIn"。请像上面一样在文档中尝试语句"$（'body'）.thoggleClass（'projectLoaded'）"。它会起作用的。

相关文章：