javascript - 如何在用户脚本中使用 .removeClass()

Question

这个问题已经有答案了:

How to remove CSS Class with Tampermonkey? (3 个回答)

已关闭 4 年前。

我正在尝试删除 hide来自单个div的类使用 Violentmonkey 和 jQuery。我的用户脚本没有做任何事情，我不明白为什么。

已经尝试过:

• 添加// @grant GM_addStyle
• 使用以下选择器:$("expand_collapse.hide") , $("div.expand_collapse") , $(".expand_collapse")
• 使用 Tampermonkey
• 使用 @require https://code.jquery.com/jquery-3.4.1.min.js 获取 jQuery

这是 div:

<div class="expand_collapse hide">
  <a href="javascript:" id="expand_all">
        Expand
  </a>
  <a href="javascript:" id="collapse_all">
        Collapse
  </a>
</div>

这是我的用户脚本:

// ==UserScript==
// @name unhide
// @match https://example/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// ==/UserScript==

$("div.expand_collapse.hide").removeClass("hide");

当我手动删除 hide 时使用 Chrome 检查器类，展开和折叠链接将按预期显示并工作。我想通过 userscript 实现同样的目标，但它不起作用。

Answer 1

感谢评论中的人们，我发现我尝试修改的内容是动态添加的，因此当我的用户脚本触发时它还不存在。正在关注Archer's建议我添加了 3 秒延迟 setTimeout()效果很好。这是工作用户脚本:

// ==UserScript==
// @name unhide
// @match https://example.com/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

// ==/UserScript==

setTimeout( function() {
  $("div.expand_collapse.hide").removeClass("hide");
}, 3000 )

如果有替代/更优雅/更好的解决方案，我将非常高兴了解它。谢谢!

编辑:charlietfl建议使用setInterval()到更短的时间(比我必须使用 setTimeout() )和 clearInterval()一旦div出现了。这会导致链接显示得更快。这是代码:

var i = $("div.expand_collapse.hide").length;

var myInterval = setInterval(unhide, 250);

function unhide () {
  $("div.expand_collapse.hide").removeClass("hide");
}

if (i != 0) {
  clearInterval(myInterval);
};