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

Question

我有一个只能使用一次的切换按钮。这是脚本的一部分：

$('#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%)');

    }

});

If 条件的第一部分被触发，而不是 Else 部分。我不明白为什么。有帮助吗？

Answer 1

您的代码中有两个错误。 1) 没有这样的属性 as :unchecked，你应该使用 :checked 属性 2) 你写的是 if(mode = true) 而不是 if(mode == true)，所以你没有检查相等性，你分配了新值

有正确的代码：

$('#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

这里有几个问题。 @AidOnline01 提到了前两个。

属性 unchecked 不存在，请使用 checked 代替。
if (mode = true) 语句为 mode 赋值而不是评估相等性。使用 if (mode == true)
淡出功能在分配之前不会等待动画完成。使用回调调用 $('.container').css('display','none');

我制作了一个 JSFiddle 来演示： https://jsfiddle.net/g3y27o5L/4/

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

JQuery toggle doesn't work on change when I try to set css

javascript

jquery

toggle