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块放在要与事件绑定的函数中＆＃39;单击＆＃39;：

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

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

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

Answer 2

如果要查看单击，请将if放在click事件中。您的解决方案无法正常工作的原因是您将一个侦听器附加到该元素，但您会立即进行检查。每次用户点击时，检查都不会发生，只需一次。您必须将它放在侦听器的回调函数中，以便每次单击该元素时执行它：

array.filter

这是如何工作的，它会将点击事件附加到$(function() { $(".cat").click(function() { $(".cat").toggleClass("black red"); }); });，并在点击时切换类.cat和black。这完全摆脱了检查，因为这是不必要的。只需在点击时切换类。此外，无需重复选择器，只需使用red。这是一个片段：

＆＃13;

this

＆＃13;

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

＆＃13;

.black {
  color: black;
}

.red {
  color: red;
}

＆＃13;

Answer 3

您的代码未删除类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');

            };
        });

如果语句仅在javascript中检查变量值一次

3 个答案: