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>

我希望每次单击它时都会更改span元素的类（打开/关闭），但它只会在第一次更改类时，全局变量值始终保持为false。

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

Answer 1

使用==或===进行比较时，例如open == true。将其更改为分配open = true和open = false。

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

// 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() {});
  });

})();

Answer 2

请试试这个...
另请注意＆＃34; == ＆＃34; operator主要用于为变量分配新值。

<div class="header">
    <span></span>
</div>

<script>
    var open = false;
    $('.header').click(function () {
        $(this).find('span').text(function (_, value) {
            console.log(open);//better way to examine code

            if (!open) {
                $(this).addClass('fa fa-minus-circle');
                //open == true; This can only be used as a condition...
                open=true;//but here you re-assign a new property / value and then the variable changes

            } else {
                $(this).addClass('fa fa-plus-circle');
                //open == true; This can only be used as a condition...
                open=true;//but here you re-assign a new property / value and then the variable changes

            }

            //Perhaps you might also be interested in using tenary operators...
            !(open)?(function(e){
                open=true;
                $(e).addClass('fa fa-minus-circle');
            })($(this)):(function(){
                open=true;
                $(e).addClass('fa fa-minus-circle');
            })($(this));

        });
        $(this).nextUntil('tr.header').slideToggle(100, function () {

        });
    });
</script>

在JavaScript中发出更改全局变量的问题

2 个答案: