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

您提供的示例完美无缺。还会有另一个问题。也许你的库没有正确加载。因此，请了解有关调试代码的更多信息，您很快就会发现问题。

＆＃13;

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

＆＃13;

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

＆＃13;

进一步阅读：

Liam已经回答How can I debug my JavaScript code? [closed]

Answer 2

也许，库中的错误。这很好。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我以另一种方式解决了这个问题。你可以在这里看到我的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>

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

3 个答案: