Как изменить значок после нажатия на него в Bootstrap 4? - PullRequest
Новая
       6

Как изменить значок после нажатия на него в Bootstrap 4?

0 голосов
/ 15 мая 2018

У меня есть это 

<div class="container">
    <button id="menu-sound" class="btn video-icon" onclick="SoundOnAndOff()">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

и в js 

$('#menu-sound').click(function(){
$(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});

Почему не работает?

Ответы [ 3 ]

0 голосов
/ 15 мая 2018

Возможно, ошибка в библиотеке.Это прекрасно работает. 

$('#menu-sound').click(function(){
$(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <button id="menu-sound" class="btn video-icon">
        <i class="fa fa-volume-up"></i>
    </button>
</div>
0 голосов
/ 15 мая 2018

Я решил эту проблему по-другому.Вы можете увидеть мой Plunker Demo здесь.

 $(document).ready(function() {
  $('#menu-sound').click(function() {
    console.log($('#icon-menu-sound').hasClass('fa-volume-up'));
    if ($('#icon-menu-sound').hasClass('fa-volume-up')) {
      $('#icon-menu-sound').removeClass('fa-volume-up');
      $('#icon-menu-sound').addClass('fa-volume-off');
    } else if ($('#icon-menu-sound').hasClass('fa-volume-off')) {
      $('#icon-menu-sound').removeClass('fa-volume-off');
      $('#icon-menu-sound').addClass('fa-volume-up');
    }
  });
});

Я немного изменил HTML 

<div class="container">
<button id="menu-sound" class="btn video-icon">
<i id='icon-menu-sound' class="fa fa-volume-up"></i>
</button>

0 голосов
/ 15 мая 2018

Пример, который вы предоставили, работает отлично.Будет еще одна проблема.Возможно, ваши библиотеки загружаются неправильно.Так что узнайте больше об отладке вашего кода, и вы скоро обнаружите проблему. 

$('#menu-sound').click(function() {
  $(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});

function SoundOnAndOff() {
  console.log('toggling sound');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container">
  <button id="menu-sound" class="btn video-icon" onclick="SoundOnAndOff()">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

Дополнительная информация:

Лиам уже ответил Как я могу отладить мойКод JavaScript?[Закрыт]

...