在Bootstrap 4中單擊后如何更改圖標？

Question

我有這個

<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');
});

為什么不工作？

Answer 1

您提供的示例效果很好。 會有另一個問題。 也許您的庫未正確加載。 因此，找到有關調試代碼的更多信息，您很快就會發現問題。

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

進一步閱讀：

Liam已回答我該如何調試我的JavaScript代碼？ [關閉]

Answer 2

也許是圖書館的錯誤。 這項工作很好。

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

Answer 3

我用另一種方式解決了這個問題。 您可以在此處查看我的Plunker演示 。

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