Javascriptの三項演算子は、私が最も単純な論理が働いていない当時の一つ抱えている

Question

...私は隠されたコンテンツを表示するためのリンク（id=show-additional-info）をクリックすると

、私は期待通りに動作しませんアイコンのクラスを切り替えしようとしている：

$(document).ready(function(){ 

    $("#show-additional-info").on('click', function() { 

    console.log('---------------'); 

    var iconToggle = $('#additional-info').attr("aria-expanded");   
    var active_icon = iconToggle 
      ? 'fa fa-chevron-circle-right' 
      : 'fa fa-chevron-circle-down'; 

    $('#icon-toggle').attr("class", active_icon); 

    // show state of trigger event, ternary operator, and affected element class 
    console.log('additional-info.aria-expanded: ' + iconToggle); 
    console.log('active_icon: ' + active_icon); 
    console.log('icon-toggle.class: ' + $('#icon-toggle').attr("class")); 
    }); 
}); 

コンソールログが予想され、未定義のように、第1の状態を示し、falseyであるべきです。繰り返しクリックすると、真と偽の間で、aria-expanded属性の状態が切り替わります。

--------------- 
additional-info.aria-expanded: undefined 
active_icon: fa fa-chevron-circle-down  // <-- correctly assigns state. 
icon-toggle.class: fa fa-chevron-circle-down 
--------------- 
additional-info.aria-expanded: true 
active_icon: fa fa-chevron-circle-right // <-- correctly changes state. 
icon-toggle.class: fa fa-chevron-circle-right 
--------------- 
additional-info.aria-expanded: false 
active_icon: fa fa-chevron-circle-right // <-- should be circle down! 
icon-toggle.class: fa fa-chevron-circle-right 
--------------- 
additional-info.aria-expanded: true 
active_icon: fa fa-chevron-circle-right 
icon-toggle.class: fa fa-chevron-circle-right 
--------------- 
additional-info.aria-expanded: false 
active_icon: fa fa-chevron-circle-right // <-- should be circle down! 
icon-toggle.class: fa fa-chevron-circle-right 

HTML部分が期待どおりに動作しており、この予期しない動作に関与していると表示されませんが、完全を期すために、ここにある：三項演算子は、値を代入されていませんが、私は期待通り：

<i id="icon-toggle" class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp;<a id="show-additional-info" href="#additional-info" data-toggle="collapse">Additional Batch Info</a><br><br> 
    <div> 
    <ul id="additional-info" class="list-unstyled collapse"> 

    <!-- stuff... ---> 

    </ul> 
    </div> 

私の人生にとって、私は三項演算子で間違っているのか分かりません。目の別のセットは高く評価されるだろう！

Answer 1

これをtoggleClass()メソッドで行うほうがはるかに簡単ですか？

$(document).ready(function(){ 
 
    $("#show-additional-info").on('click', function() { 
 
     $("#icon-toggle").toggleClass("fa-chevron-circle-right fa-chevron-circle-down") 
 
    }); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<i id="icon-toggle" class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; 
 
<a id="show-additional-info" href="#additional-info" data-toggle="collapse">Additional Batch Info</a> 
 
<br><br> 
 
    <div> 
 
    <ul id="additional-info" class="list-unstyled collapse"> 
 

 
    <!-- stuff... ---> 
 

 
    </ul> 
 
    </div>

Answer 2

私が質問を投稿直後、答えは私を襲っ：

'false' == true

私はブール値をテストしていたと思ったが、それは本当に文字列でした。コードを

var active_icon = iconToggle == 'true' 
     ? 'fa fa-chevron-circle-right' 
     : 'fa fa-chevron-circle-down'; 

に変更し、期待通りに機能しました。

受け入れ答えが示すようしかし、より良い答えは、車輪の再発明をしないことです。

$("#icon-toggle").toggleClass("fa-chevron-circle-right fa-chevron-circle-down")