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才能尝试。

对这个潜在解决方案，或许可能和其他想法的任何想法表示感谢。

/ * UPDATE * /

为清楚起见，它似乎与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>

Answer 2

您可以使用IIFE（Immidiately Invocked Function Expression）：

像：

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

Answer 3

只需将您的功能放在文档中就像

一样

'Window OS or OS X OS'

Answer 4

没有提供真正的解决方案。

不能改变整个站点基础设施 - 从推迟jquery到同步加载它。

另外两个jquery答案是根据当前设置而不起作用。

唯一可行的解决方案是由Tushar提供的，虽然它仍然需要选择性加载脚本，但答案中没有包含。

最后，我使用了一种解决方法，绕过了对任何javascript的需求。我没有选择性地将类添加到html标记，而是将css永久地添加到html标记中，从而影响所有页面。然后我添加了一个内部div，将其反转。这意味着任何页面现在都可以直接操作自己的功能，而无需向html标记添加类。

jquery不够快，不能生效

4 个答案: