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>

Answer 2

从你的代码中我理解的是你要切换课堂的礼物 night-time

$('.blog-desc').find('a').on('click', function () {
    $('html').toggleClass('night-time');
});

如果您想根据州(夜晚/日)做其他事情,您可以测试班级的礼物

$('.blog-desc').find('a').on('click', function () {
    var $html = $('html').toggleClass('night-time');
    if ($html.hasClass('night-time')) {
        console.log('now it is night')
    } else {
        console.log('now it is day')
    }
});

在你的代码的问题是if,只有当一旦页面加载,然后因为默认值是评估条件false的if块被执行,addClass()被执行的回调,第二个处理程序完全没有注册.

如果出于任何原因想要检查这样的情况,则需要单击处理程序并检查单击处理程序中的条件