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

我试图理解javascript jquery在这种情况下是如何工作的。我以为我明白了，但我还没有完全明白。请参阅下面的代码。为什么当我点击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');

}
});

---

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

如果要检查单击，请将If放在单击事件中。解决方案不起作用的原因是，您将侦听器附加到元素，但立即执行检查。检查并不是每次用户单击时都进行，只是一次。必须将其放入侦听器的回调函数中，以便在每次单击元素时执行：

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

其工作原理是它将一个单击事件附加到.cat，并在单击时将类切换为黑色和红色。这完全不用检查，因为这是不必要的。只需在单击时切换类。此外，无需重复选择器，只需使用此选项即可。下面是一个片段：

$function{ $.cat.clickfunction{ $this.toggleClassblack-red； }; }; 布莱克先生{ 颜色：黑色； } 瑞德先生{ 颜色：红色； }

---

测试如果要检查单击，请将If放在单击事件中。解决方案不起作用的原因是，您将侦听器附加到元素，但立即执行检查。检查并不是每次用户单击时都进行，只是一次。必须将其放入侦听器的回调函数中，以便在每次单击元素时执行：

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

其工作原理是它将一个单击事件附加到.cat，并在单击时将类切换为黑色和红色。这完全不用检查，因为这是不必要的。只需在单击时切换类。此外，无需重复选择器，只需使用此选项即可。下面是一个片段：

$function{ $.cat.clickfunction{ $this.toggleClassblack-red； }; }; 布莱克先生{ 颜色：黑色； } 瑞德先生{ 颜色：红色； }

---

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

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

编辑：更简单的方法是使用：

---

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

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

编辑：更简单的方法是使用：

---

您的代码没有删除类black而添加类red，因为在加载页面时，if{}else{}代码块正在运行。当您单击cat类时，它只是将cat变量的值赋给false。因为if-else代码块不在click函数中，所以它不会再次执行。这就是它不起作用的原因。要使用代码，请将if-else代码块放置在单击函数中，如下所示：

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

            };
        });

---

您的代码没有删除类black而添加类red，因为在加载页面时，if{}else{}代码块正在运行。当您单击cat类时，它只是将cat变量的值赋给false。因为if-else代码块不在click函数中，所以它不会再次执行。这就是它不起作用的原因。要使用代码，请将if-else代码块放置在单击函数中，如下所示：

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

            };
        });

---

您没有将if语句放入click函数中，因此它不会执行。首先将cat设置为true，然后立即检查它是否与true相同，因为它与true相同，所以删除红色类并添加黑色类。当有人单击cat元素时，唯一发生的事情是将变量cat设置为false，仅此而已。问题不在于if语句，而是在执行代码时。首先将cat设置为true，然后添加一个click处理程序，然后检查cat是否为true，它将始终为true。在将来的某个时候，cat元素可能会被单击，但您唯一要做的就是将cat变量设置为false，因为这是您在click事件处理程序中唯一要做的事情。您的if语句将不会重新计算，因为它不是click-event-handler的一部分。请检查我的更新答案您没有将if语句放入click函数中，因此它不会执行。首先将cat设置为true，然后立即检查它是否与true相同，因为它与true相同，所以删除红色类并添加黑色类。当有人单击cat元素时，唯一发生的事情是将变量cat设置为false，仅此而已。问题不在于if语句，而是在执行代码时。首先将cat设置为true，然后添加一个click处理程序，然后检查cat是否为true，它将始终为true。在将来的某个时候，cat元素可能会被单击，但您唯一要做的就是将cat变量设置为false，因为这是您在click事件处理程序中唯一要做的事情。不会重新计算if语句，因为它不是click事件处理程序的一部分。

---

检查我的更新答案这是一个更好的解决方案，但它并没有真正解释OP的代码为什么不工作…@nnnnnn updated！谢谢你的建议！这是一个更好的解决方案，但它并没有真正解释OP的代码为什么不工作…@nnnnnn更新！谢谢你的建议！您错过了被问到的问题：为什么在单击.cat元素时它不会更改。。。。这是因为if语句是在初始化时运行的，并且在单击元素时从未运行过。您错过了被问到的问题：为什么在单击.cat元素时它没有更改。。。。这是因为if语句是在初始化时运行的，在单击元素时从不运行。