Javascript三元运算符未按预期工作答案

【问题标题】：Javascript ternary operator not working as expectedJavascript三元运算符未按预期工作
【发布时间】：2018-02-19 20:09:38
【问题描述】：

我正经历着最简单的逻辑不起作用的日子……

当我单击链接 (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"));
  });
});

控制台日志将第一个状态显示为未定义，这是预期的，应该是错误的。通过反复点击，我看到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>

对于我的一生，我看不出我在使用三元运算符时做错了什么。另一双眼睛将不胜感激！

【问题讨论】：

标签： javascript jquery ternary-operator

【解决方案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>

【讨论】：

这是一个更好的解决方案 - 完全避免不必要的三元。
更优雅；谢谢。它没有回答我的问题，但它解决了我的问题。 :) +1

【解决方案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")

【讨论】：