在Bootstrap 4中单击后如何更改图标？

Question

I have this

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

and in js

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

Why don't work ?

Answer 1

The example that you've provided works perfectly fine. There will be another problem. Maybe your libraries are not loading correctly. So find out more about debugging your code and you'll find the problem pretty soon.

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

Further reading:

Liam answered already How can I debug my JavaScript code? [closed]

Answer 2

Maybe, mistake in library. This work fine.

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

I've solved this problem in another way. You can see my Plunker Demo here.

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

I've changed the HTML a bit

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