javascript - 在 JavaScript 中更改全局变量时出现问题

Question

我当前在更改 JavaScript 函数中的全局变量值时遇到问题。我使用的代码如下:

<script>
    var open = false;
    $('.header').click(function () {     
        $(this).find('span').text(function (_, value) { 
            alert(open); 
            if (open == false) { 
                $(this).addClass('fa fa-minus-circle'); 
                open == true; 
            } else {  
                $(this).addClass('fa fa-plus-circle'); 
                open == false; 
            } 
            /*return value == '+' ? '-' : '+' */ 
        });
        $(this).nextUntil('tr.header').slideToggle(100, function () {
        });
    });
</script>

我想每次单击(打开/关闭)跨度元素时更改它的类，但它只在第一次更改类，并且全局变量值始终保持 false。

我尝试在文档准备好之前在函数外部声明全局变量，但仍然存在相同的问题。我做错了什么？

Answer 1

当您使用 == 或 === 时，您正在进行比较，例如 open == true。将其更改为赋值 open = true 和 open = false。

我已合并 @Bergi's和 @Wizard's评论。另外，将类 fa 放在相关的 html 元素上。您不必一直添加或删除它。

// a module to make the open variable local
(function() {

  var open = false;
  $('.header').click(function() {
    $(this).find('span').text(function(_, value) {
      alert(open);
      if (open == false) {
         // remove plus before adding minus
        $(this).removeClass('fa-plus-circle')
          .addClass('fa-minus-circle');
        open = true; // change to assignment
      } else {
        // remove minus before adding plus
        $(this).removeClass('fa-minus-circle')
          .addClass('fa-plus-circle');
        open = false; // change to assignment
      } /*return value == '+' ? '-' : '+' */
    });
    $(this).nextUntil('tr.header').slideToggle(100, function() {});
  });

})();