Question

目前正在处理一个简单的脚本，如果它在一天中的某个时间显示夜间背景，则显示白天图像，如果它是一天中的不同时间。我正在使用jQuery通过添加一个类来实现这个，如果一个是真的，并且如果另一个是真的则添加一个类。问题是......代码只是赢得了正常的功能。对任何可能的解决方案感到好奇......谢谢！

＆＃13;

$(document).ready(function() {
  var currentTime = new Date().getHours();
  if (7 <= currentTime && currentTime < 20) {
    $("document.body").addClass("day");
    $("document.body").removeClass("night");
  } else {
    $("document.body").addClass("night");
    $("document.body").removeClass("day");
  }
});

＆＃13;

.night {
  background-image: url('images/night.jpg');
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

＆＃13;

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
  </script> 
</head>
<body>
  <div class="app-wrapper">
    <p id="date"></p>
  </div>
</body>

＆＃13;

Answer 1

变化： -

$("document.body").addClass("day");
$("document.body").removeClass("night");

于： -

$("body").addClass("day").removeClass("night");

（同样适用于第二个）

工作演示示例： -

＆＃13;

$(document).ready(function() {
  var currentTime = new Date().getHours();
  if (7 <= currentTime && currentTime < 20) {
    $("body").addClass("day").removeClass("night");
  } else {
    $("body").addClass("night").removeClass("day");
  }
});

＆＃13;

.night {
  background-color: black;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.day {
  background-color: grey;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-
hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="app-wrapper">

  <p id="date"></p>

</div>

</body>
</html>

＆＃13;

Answer 2

您需要将$("document.body")替换为$("body")

jQuery addClass和removeClass不工作

2 个答案: