Geek Answers Handbook

JavaScript if / else does not work as expected

I use jQuery to select a button on my website and add an event listener to add a class night-timewhen clicked.

The button initially works, however, when I click the button again, it will not run code to delete the class night-time.

Here is the JavaScript code:

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

}

I really don't know why this does not work, but I feel that I am missing something that is painfully obvious. In addition, it .animate({}, 200)also does not work, since he immediately applies the class, but this problem is not as important for me as the main one.

+4
source share
8 answers

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>
Hide result
+6

, 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(), .

- ,

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

. , :

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

, if. , night_time .

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

, , click .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!");
    }
  });
0

"button" .

: 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);   
    }
}
0

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

More articles:


All Articles