javascript - jquery 不够快生效

Question

我需要向某些页面添加一个类 - 包含 ID 为#hero 的页面。对于所有其他页面，不得添加该类。

因为我使用的是带有几个分层母版页的 asp.net，它不像直接向 html 添加一个类那么简单，因为 body 标记位于 aspx 页面上方的几个页面。

我可以找到 body 标签，但由于增加的复杂性，到目前为止我已经尝试避免这种情况，而是尝试使用 jquery。

代码如下:

$(document).ready(function () {

    updateBodyClasses();

});

function updateBodyClasses() {

    if($("#hero")) {
        $("html, body").addClass("hero");

    }
}

没什么复杂的，但问题就在这里。到类被追加时，页面已经呈现并且类似乎没有任何效果。但是，如果我通过将类直接添加到 html 来测试它，它会起作用 - 所以我知道 CSS 起作用并且它是一个时间问题。

我想我可以将代码添加到页面的更高位置 - jquery 被推迟，所以我需要知道等效的 javascript 才能尝试。

如果您对这个潜在解决方案或其他想法有任何想法，我们将不胜感激。

/* 更新 */

为清楚起见，似乎是未应用的 HTML 相关类。

Answer 1

您可以更改 DOM 而无需等待它准备就绪。

你需要:

• 以同步方式加载 jQuery(无延迟或异步)。
• 将 #hero 元素 i 放在脚本之上。

请考虑这个例子:

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero">I don't care about DOM being ready</div>
<script>
  var $el = $('#hero');
  if ($el.length) {
    $el.addClass('red');
  }
</script>