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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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块已执行且{{1}执行回调，第二个处理程序根本没有注册。

如果出于任何原因想要检查这样的案例，您需要单击处理程序并检查点击处理程序中的条件

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

JavaScript if / else没有按预期运行

8 个答案: