页面加载时如何删除类但只有一次答案

【问题标题】：How to remove class when page loads but only once页面加载时如何删除类但只有一次
【发布时间】：2021-05-20 07:14:16
【问题描述】：

我有一个按钮可以切换 div 上的 active 类。

当 div 具有 active 类时，它会显示出来，而当 active 类被删除时，div 会被隐藏。

我希望在页面加载时从 div 中删除 active 类，但稍后当我单击按钮时应该应用 active 类。页面加载时应该隐藏 div。

我无法访问 HTML，因此必须使用 jquery 来完成。

这是我的代码：

<button class="btn addclass">Toggle class</button>
<div class="block active">
</div>

我的js：

$(document).ready(function(){
  $(window).on('load', function(){
    if($(".addclass .block").hasClass("active")){
      $(this).removeClass("active");
    }
  });
});

$(document).ready(function(){
  $(".addclass").click(function(){
    $(".block").toggleClass("active");
  });
});

CSS

.block{
  display: none;
  padding: 50px;
  background-color: red;
}
.block.active{
  display: block;
}

【问题讨论】：

您的 if 语句不完整，缺少)
是的，我忘记添加了，但还是不行

标签： html jquery

【解决方案1】：

在这段代码中：

$(document).ready(function(){
  $(window).on('load', function(){
    if ($(".addclass .block").hasClass("active")) {
      $(this).removeClass("active");
    }
  });

this 指的是window，所以你不能在这里使用window。

您也不应该将 window.load 嵌套在 doc.ready 中（使用其中一个）。虽然 doc.ready 即使文档已经准备好也会触发，但窗口加载只会在它加载的一次触发，并且会在 doc.ready 运行之前触发，因此您的代码（可能）永远不会运行。

您的代码可以缩短为：

$(function() { 
    $(".addclass .block.active").removeClass("active"); 
});

【讨论】：

我刚刚发现活动类需要一些时间来申请，所以我在你的代码上添加了超时并且它起作用了。谢谢
很高兴你把它整理好了。您知道如何/何时应用活动课程吗？例如，通过事件或回调或 ajax 事件，可能会“挂钩”该进程。 setTimeout 可能会有风险，因为有时延迟可能比您预期的要长。
页面加载后需要 2 3 秒。我正在研究 Magento2，我对这个框架了解不多。如果您想将任何产品赠送给某人，这是一种要发送的礼物信息

【解决方案2】：

由于 jQuery 专门控制 DOM 的所有内容，如果您在 document 对象上侦听 "DOMContentLoaded" 事件，它会更快且更少闪烁。到那时所有的 DOM 都已加载并且脚本已被解析。如果您在window 对象上监听"load" 事件，那么所有内容都已加载，包括您不需要运行jQuery 的所有内容。

顺便说一句，如果您还不知道，重要的是所有<script> 元素都放在结束</body> 标记之前。当然，这对您来说可能是不可能的，因为您必须在页面加载时处理第 3 方代码。请参阅article 了解刚刚讨论的内容。

/*
Once document is loaded
Remove .active from .block
*/
$(document).on('DOMContentLoaded', e => $('.block').removeClass('active'));

/* ALTERNATIVE
Once document is loaded
Hide .block
/
$(document).on('DOMContentLoaded', e => $('.block').hide());
*/

/*
When .toggle is clicked...
Toggle .block to hide/show
Toggle the text of .toggle to "SHOW/HIDE"
*/
$('.toggle').on('click', function(e) {
  $(this).text($(this).text() === 'SHOW' ? 'HIDE' : 'SHOW');

  /*
  Toggle .active class on/off on .block
  */
  $('.block').toggleClass('active');

  /* ALTERNATIVE
  Toggle .block show/hide slowly
  /
  $('.block').toggle('slow');
  */
});

body {
  font: 5ch/1 Consolas;
  text-align: center;
}

button {
  font: inherit;
  cursor: pointer;
}

.block {
  display: none;
}

.active {
  display: block;
}

<button class="btn toggle">SHOW</button>
<div class="block active">ACTIVE</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：