if语句在javascript中只检查一次变量值

Question

我试图了解 javascript（在本例中为 jquery）if 语句的工作原理。我以为我明白了，但我没有完全明白一些事情。请看下面的代码。为什么当我单击“cat”类的元素时，它没有删除“black”类并添加“red”类。

$(function() {

 var cat = true;

$( ".cat" ).click(function() {
  cat = false;
});

if (cat === true) {
  $('.cat').removeClass('red').addClass('black');
} else {
  $('.cat').removeClass('black').addClass('red');

}
});

我知道这可能有一个非常简单的答案，但我只是在学习，所以任何帮助将不胜感激，在此先感谢。

Answer 1

切换 cat 的值并将 if 块放在要与事件“click”绑定的函数中：

$(".cat").click(function() {
  cat = !cat;
  if (cat === true) {
    $('.cat').removeClass('red').addClass('black');
  } else {
    $('.cat').removeClass('black').addClass('red');
  }
});

编辑：更简单的方法是使用.toggleClass()：

 $(".cat").click(function() {
     $(this).toggleClass('red black');
 });

Answer 2

如果要检查点击，请将 if 放在点击事件中。您的解决方案不起作用的原因是您将侦听器附加到元素，但您立即进行检查。每次用户单击时都不会进行检查，只会进行一次。你必须把它放在监听器的回调函数中，这样每次点击元素时它都会执行：

$(function() {
    $(".cat").click(function() {
        $(".cat").toggleClass("black red");
    });
});

其工作原理是将点击事件附加到.cat，并在点击时切换black 和red 类。这完全摆脱了检查，因为这不是必需的。只需在点击时切换类。此外，无需重复选择器，只需使用this。这是一个sn-p：

$(function() {
    $(".cat").click(function() {
        $(this).toggleClass("black red");
    });
});

.black {
  color: black;
}

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat red">Test</div>

Answer 3

您的代码没有删除类black 并添加类red，因为您的if(){}else{} 代码块在您的页面加载时运行。当您单击cat 类时，它只是将cat 变量的值分配给false。因为您的 if else 代码块超出了您的点击功能，这就是它不再执行的原因。这就是为什么它不起作用。要使用您的代码，请将 if else 代码块放在 click 函数中，如下所示：

$( ".cat" ).click(function() {
          cat = false;
          if (cat === true) {
            $('.cat').removeClass('red').addClass('black');
            } else {
              $('.cat').removeClass('black').addClass('red');

            };
        });