当我尝试设置 css 时，JQuery 切换不起作用

Question

I have a toggle button that works only once. This is the portion of script:

$('#toggle').change(function(){

    var mode= $(this).prop('unchecked');

    if(mode = true) {

      $('.container').css('display','block'); 
      $('.container').hide().delay(500).fadeIn(1000); 
      $('#map').css('filter','grayscale(100%)');

    } else {

      $('.container').css('display','none'); 
      $('.container').delay(500).fadeOut(1000); 
      $('#map').css('filter','grayscale(0%)');

    }

});

The first part of If condition is fired, not the Else part. I don't understand why. Some help?

Answer 1

There are two errors in you code. 1) There is no such property as:unchecked, you should use:checked property 2) You have written if(mode = true) not if(mode == true), so you didn't check equality, you assign new value

There is right code:

$('#toggle').change(function(){

var mode= $(this).prop('checked');
console.log(mode);

if(mode == true) {

  $('.container').css('display','block'); 
  $('.container').hide().delay(500).fadeIn(1000); 
  $('#map').css('filter','grayscale(100%)');

} else {

  $('.container').css('display','none'); 
  $('.container').delay(500).fadeOut(1000); 
  $('#map').css('filter','grayscale(0%)');

}

});

Answer 2

A couple issues here. @AidOnline01 mentioned the first two.

1. Property unchecked doesn't exist, use checked instead.
2. if (mode = true) statement assigns mode a value instead of evaluating equality. Use if (mode == true)
3. Fade out function doesn't wait for animation to complete before assigning. Use a callback to call $('.container').css('display','none');

I've made a JSFiddle to demonstrate: https://jsfiddle.net/g3y27o5L/4/