Question

我正在尝试根据一天中的时间更改代码中的几个类。我可以让背景改变，但我也需要更改菜单颜色。我似乎无法在页面中的链接中添加一个类来让它们也改变！不知道我哪里出错，任何帮助都会非常感谢，谢谢！

P.S。我也尝试过jQuery css（），也没有运气......

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中，你没有className。看看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")

应该有效

根据时间改变身体和链接的类别

3 个答案: