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()回调，第二个处理程序根本没有注册。

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

Answer 3

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

Answer 4

您的条件是在单击处理程序之外。 你的意思是它表现得像这样：

var night_time = false;

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

Answer 5

您似乎错误地构造了if语句。 您可能希望首先检查您的点击次数，然后决定是否为night_time 。

$('.blog-desc').find('a').on('click', function () {
    if (!night_time) {
        //code...
    } else {
        //code...
    }
});

Answer 6

您拥有它的方式，只有一个点击事件将添加到.blog-desc 。 您应该更改它，以便您的逻辑允许此按钮仅使用一个事件来打开和关闭night_time：

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

Answer 7

如何只将一个监听器添加到“按钮”并在单个函数中处理类更改。

小样本： http ： //jsfiddle.net/entr0cks/33grpurh/

var $html = $('html'),
    NIGHT_CLASS = 'night-time';

$html.addClass(NIGHT_CLASS);
$html.on('click', toggleNight);

function toggleNight(){
    if($html.hasClass(NIGHT_CLASS)){
        $html.removeClass(NIGHT_CLASS);   
    } else {
        $html.addClass(NIGHT_CLASS);   
    }
}

Answer 8

您需要将click事件移出if语句，并将if语句放在click事件中。

var night_time = false;
$('.blog-desc').find('a').on('click', function() {
    console.log("blog-desc a was clicked");
    if (night_time == false) {
        $('html').addClass('night-time').animate(200);
        night_time = true;
        console.log("night_time value: " + night_time + " (Should be True)");
    } else {
        $('html').attr('class', "");
        night_time = false;
        console.log("night_time value: " + night_time + " (Should be False)");
    }
});