opérateur ternaire Javascript ne fonctionne pas comme prévu

Question

Je vais avoir un de ces jours où ne fonctionne pas ...

la logique la plus simple Lorsque je clique sur un lien (id=show-additional-info) pour afficher le contenu caché, je suis en essayant de passer la classe d'une icône:

$(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")); 
    }); 
}); 

le journal de la console affiche le premier état comme non défini, qui est prévu, et devrait être Falsey. Avec des clics répétés, je vois l'état aria-expanded bascule d'attribut entre vrai et faux. Mais l'opérateur ternaire n'est pas attribuer des valeurs que je pense:

--------------- 
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 

La partie html fonctionne comme prévu, et ne semble pas être impliqué dans ce comportement inattendu, mais par souci d'exhaustivité, voici:

<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> 

Pour la vie de moi, je ne peux pas voir ce que je fais mal avec l'opérateur ternaire. Un autre ensemble d'yeux serait apprécié!

Answer 1

Avez-vous pensé à faire cela avec la méthode toggleClass() beaucoup plus facile?

$(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

Peu après avoir posté la question, la réponse m'a frappé:

'false' == true

Je pensais que je testais un booléen, mais il était vraiment une chaîne. J'ai changé le code à

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

et cela a fonctionné comme prévu.

Cependant, la meilleure réponse est de ne pas réinventer la roue, comme la réponse acceptée montre:

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