Question

我试图根据一天中的时间更改代码中的几个类。我可以很好地改变背景，但我也需要改变菜单的颜色。我似乎无法在页面中的链接中添加一个类来让它们也发生变化！不知道我哪里做错了，任何帮助都将不胜感激，谢谢！

附言：我也试过jQuery cs（），也没有成功。。。

function getDayTime(hours) {
if (hours > 20 || hours < 5)
    return "night";

if (hours > 17)
    return "dusk";

if (hours > 8)
    return "day";

return "dawn";
}

$(function() {
    document.body.className = getDayTime(new Date().getHours());
});

太棒了，非常感谢大家的帮助，我更改了javascript，它也很好用。然而，我现在也在尝试将黎明的颜色改为白色——即使我将其编码为白色，它仍然保持为红色！显然，我的身体里没有足够的咖啡。。。

body.dawn #menu a {
    color:#fff !important
}

body.day #menu a {
    color:#8a0000 !important
}

body.dusk #menu a {
    color:#fff !important
}

body.night #menu a {
    color:#fff !important
}

Answer 1

在jQuery中，你没有类名。查看addClass和类似的。

然而，我建议你在CSS中加入这样的内容：

body.night a {
    /* your style for the  nightlink  with !important to be sure */
}

因此，您不需要要求JS检索和迭代页面中的所有A节点。此外，如果你要动态添加链接，使用CSS方法，样式也会自动应用于它们。

编辑：与原始问题无关，但我认为你可以用这样的方式简化js代码中的条件：

function getDayTime(hours) {
    if (hours > 20 || hours < 5)
        return "night";

    if (hours > 17)
        return "dusk";

    if (hours > 8)
        return "day";

    return "dawn";
}

$(function() {
    document.body.className = getDayTime(new Date().getHours());
});

Answer 2

我不知道你的CSS是什么样子的，但你可以这样做：

假设你的CSS看起来像这样：

<style type="text/css">
  body { /* some stuff here */ }
  body.day { /* some day stuff here */ }
  body.night { /* some night stuff here */ }
  #menu { /* some stuff here */ }
  #menu a { /* some menu link styling here */ }

  /* To change #menu when body has class="day" */
  body.day #menu { // change menu when it s day }
  body.day #menu a { // change menu links */ }

  /* To change #menu when body has class"night" */
  body.night #menu { /* change menu when it s night */ }
  body.night #menu a { // change menu links */ }
</style>

Answer 3

$("a").addClass("nightlink")

应该工作

友情链接