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>

が、私は毎回私は（オープンは/クローズ）しかし、それは唯一の最初のクラスを変更し、それをクリック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

これを試してみてください...
はまた、「==」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>