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

If statement only checks variable value once in javascript

本文关键字：一次 变量值 检查 语句 javascript If      更新时间：2023-09-26

我想了解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');
}
});

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

切换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');
 });

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

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

这是如何工作的，它附加一个点击事件到.cat，点击，切换类black和red。这样就完全摆脱了检查，因为检查是不必要的。只需切换类点击。同样，不需要重复选择器，只需使用this。下面是一个片段:

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

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

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