JavaScript if/else 没有按预期运行

Question

我正在使用 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) 也不起作用，因为它只是立即应用类，但这个问题对我来说不如主要问题重要。

Answer 1

更新您的 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>