JavaScript if/else未按预期操作

JavaScript if/else not acting as expected

本文关键字：操作 if else JavaScript      更新时间：2023-09-26

我使用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>

根据您的代码，我所理解的是您想要切换类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()回调，因此根本没有注册第二个处理程序。

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

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

您的条件位于单击处理程序之外。你的意思是让它表现成这样：

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!");
  }
});

看起来您的if语句结构不正确。您需要先检查您的点击量，然后决定是否为night_time。

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

按照您的方式，只有一个点击事件会添加到.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!");
    }
  });

在"按钮"中只添加一个监听器，并在单个函数中处理类的更改。

小样本：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);   
    }
}

您需要将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)");
    }
});
相关文章：