javascript - JavaScript if/else与预期不符

我正在使用jQuery选择我网站上的按钮，并添加了一个事件监听器，以在单击时添加一个night-time类。

最初，该按钮有效，但是当我再次单击该按钮时，它将不会运行代码来删除night-time类。

这是JavaScript代码:

var night_time = false;

if (!night_time) {
  $('.blog-desc').find('a').on('click', function() {
    $('html').addClass('night-time').animate(200);
    night_time = true;
    console.log("Making it night!");
  });
} else {
  $('.blog-desc').find('a').on('click', function() {
    $('html').attr('class', "");
    night_time = false;
    console.log("Making it day!");
});

}

我真的不知道为什么这行不通，但是我感觉好像缺少了一些显而易见的东西。另外，.animate({}, 200)也不起作用，因为它只是立即应用了该类，但是这个问题对我来说并不像主要问题那么重要。

最佳答案

更新night_time变量不会自动更改事件处理程序。

尝试以下方法:

var night_time = false,
    $html = $('html');
$('.blog-desc').find('a').on('click', function() {
    night_time = !night_time;
    $html.toggleClass('night-time', night_time);
    console.log(night_time ? "Making it night!" : "Making it day!");
});

var night_time = false,
    $html = $('html');
$('.blog-desc').find('a').on('click', function() {
  night_time = !night_time;
  $html.toggleClass('night-time', night_time);
  console.log(night_time ? "Making it night!" : "Making it day!");
});

.night-time {
  background: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-desc">
  <a>Click me</a>
</div>