jquery - JavaScript ifelse not acting as expected - Stack Overflow

admin管理员组

文章数量:1327661

I'm using jQuery to select a button on my website and add an event listener to add a night-time class when it is clicked.

Initially the button works, however when I click the button again it won't run the code to remove the night-time class.

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 isn't working, but I feel like I'm missing something painfully obvious. Also, the .animate({}, 200) isn't working either, as it just instantly applies the class, but this problem isn't as important to me as the main one.

I'm using jQuery to select a button on my website and add an event listener to add a night-time class when it is clicked.

Initially the button works, however when I click the button again it won't run the code to remove the night-time class.

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 isn't working, but I feel like I'm missing something painfully obvious. Also, the .animate({}, 200) isn't working either, as it just instantly applies the class, but this problem isn't as important to me as the main one.

• javascript
• jquery
• css
• if-statement

Share Improve this question Follow asked Mar 24, 2015 at 15:00 ZachZach 5,1231111 gold badges3434 silver badges5454 bronze badges 3

• You could user the removeClass method as you are using the addClass – chiapa Commented Mar 24, 2015 at 15:03
• There should only be one event listener and the conditional statement should be on the inside of the listener, not the outside. – APAD1 Commented Mar 24, 2015 at 15:03
• well you set night_time = false everytime before the if statement is called. You will always land in the first case – chillichief Commented Mar 24, 2015 at 15:05

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 6

Updating your night_time variable won't automagically change the event handler.

Try this instead:

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-desc">
  <a>Click me</a>
</div>

From you code what I understand is you want to toggle the presents of the class night-time

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

---

If you want to do something else depending on the state(night/day) you can test for the presents of the class

$('.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')
    }
});

---

In your code the problem is the if condition is evaluated only once when the page is loaded then since the default value is false the if block is executed and addClass() callback is executed, the second handler is not registered at all.

If for any reason you want to check a case like this you need to have a single click handler and check the condition within the click handler

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

Your conditional is outside of the click handler. You mean for it to behave like this:

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

It looks like you have structured your if statement incorrectly. You would want to check your clicks first then decide if its night_time or not.

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

The way you have it, only only one click event will be added to your .blog-desc. You should change it so that your logic allows for this button to switch night_time on and off with just one event:

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

How about adding a listener just once to the "button" and handling the class change in a single function as well.

Little sample: http://jsfiddle/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);   
    }
}

You needed to move the click event out of the if statement and put the if statement in the click event.

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

本文标签： jqueryJavaScript ifelse not acting as expectedStack Overflow