单击时更改 fontawesome 图标不起作用答案

【问题标题】：Changing fontawesome icon on click not working单击时更改 fontawesome 图标不起作用
【发布时间】：2018-07-07 07:54:02
【问题描述】：

我有一个“音量”图标，单击时会静音，再次单击时会取消静音。我使用 .addClass() 和 .removeClass() 在图标类之间切换。虽然我可以从“fa-volume-up”更改为“fa-volume-off”，但我不能反过来；出于某种原因，在图标更改为“音量关闭”后，它没有通过“else if”条件。

我想将图标从“fa-volume-up”更改为“fa-volume-off”。

// index.js
$(function() {
  $('#vol-btn').on('click', function() {
    if ($(this).hasClass('fa-volume-up')) {
      $(this).removeClass('fa-volume-up').addClass('fa-volume-off');
      //sound.mute(true);
      console.log("Muting sound.")

      // it won't enter this condition!
    } else if ($(this).hasClass('fa-volume-off')) {
      $(this).removeClass('fa-volume-off').addClass('fa-volume-up');
      //sound.mute(false);
      console.log("Unmuting sound.")
    }
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--index.html -->
<div class='btns'>
  <i id='vol-btn' class="fa fa-volume-up"></i>
</div>

【问题讨论】：

toggleClass 在这种情况下不会更有意义
它按预期工作..你的sound.mute函数一定有问题
也许它太小了。 i {display:block;padding:8px;cursor:pointer}添加类.fa-2x
codepen.io/codespent/pen/KeOKbG 工作正常。

标签： javascript jquery html

【解决方案1】：

我同意@Derek 的观点，即切换图标更有意义 - 然后使用类来确定 console.log 消息（我在三元运算符中这样做）。

// index.js
$(function() {
  $('#vol-btn').on('click', function() {
    $(this).toggleClass('fa-volume-up fa-volume-off')
    $(this).hasClass('fa-volume-off')
      ? console.log('Muting sound')
      : console.log('Unmuting Sound')
  })
})

#vol-btn:hover {
  cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--index.html -->
<div class='btns'>
  <i id='vol-btn' class="fa fa-volume-up fa-2x"></i>
</div>

【讨论】：