Изменение шрифтового значка при нажатии не работает

У меня есть значок «тома», который будет отключать звук при нажатии и включать при повторном нажатии. Я использовал .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>

javascript,jquery,html,

0

Ответов: 1

0

Я согласен с @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>

JavaScript, JQuery, HTML,
Похожие вопросы
Яндекс.Метрика