單擊更改Fontawesome圖標不起作用

Question

我有一個“音量”圖標，當單擊該按鈕時，它將使聲音靜音，而再次單擊時，則將其靜音。 我使用.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> 

Answer 1

我同意@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>