切換靜音並用javascript取消靜音

我正在嘗試創建用於靜音和取消靜音的按鈕。切換靜音並用javascript取消靜音

起初，我已經通過按鈕可以設置這樣的：

<i class="fa fa-microphone" id="audio"></i>

什麼，我想的是，當你點擊它，類變爲：

<i class="fa fa-microphone-slash" id="audio"></i>

現在我有我的JavaScript建立像這樣：

$(document).ready(function() { 
    $('#audio').click(function() { 
    publisher.publishAudio(false); 
    }); 
});

它基本上靜音它，現在我需要使它，以便它也可以取消靜音，當我點擊o n個按鈕

來源

2015-09-16 Sebastian Jennings Almnes

裏面的#audio您點擊功能的，因爲你使用jQuery，做$（本） .toggleClass（「FA-麥克風」）toggleClass（「FA-麥克風斜槓」）; –

完美，現在你知道我如何才能在publishAudio中觸發真正的錯誤嗎？ –

有幾種方法。你可以使用監聽類的事件處理程序，但我發現它們有時並不可靠。如果你想在你的點擊函數中使用邏輯，建議使用$（「＃audio」）。hasClass（「fa-microphone-slash」）作爲if語句的布爾值，所以如果它是斜槓類，則取消靜音，否則靜音。我會把所有這些都放在一個答案中。 –

如果發佈商在流它的自我這樣發送視頻/音頻，您可以檢查：

publisher.stream.hasAudio 
publisher.stream.hasVideo

然後你可以使用！（爆炸）反轉它

publisher.publishAudio(!publisher.stream.hasAudio); 
publisher.publishVideo(!publisher.stream.hasVideo);

所以切換類藏漢您做些事情像

$(document).ready(function() { 
    var toggleAudioBtn = $('#audio') 
    toggleAudioBtn.click(function() { 
     toggleAudioBtn.toggleClass("fa-microphone-slash").toggleClass("fa-microphone"); 
     publisher.publishAudio(!publisher.stream.hasAudio); 
    }); 
});

來源

2015-09-16 17:34:19 VeXii

我認爲你在代碼中有一些錯誤，這給了我一個fa-microphone後面的分號出錯，然後在發佈者行上出現意外的標識符？ –

對不起，忘了刪除上面的行 – VeXii

使用jQuery，我倒是鏈toggleClass，使用hasClass的邏輯if語句一起：

$(document).ready(function() { 
    $('#audio').click(function() { 
    if ($(this).hasClass("fa-microphone-slash")) { 
     publisher.publishAudio(true); 
    } else { 
     publisher.publishAudio(false); 
    } 
    $(this).toggleClass("fa-microphone-slash"); 
    $(this).toggleClass("fa-microphone"); 

    publisher.publishAudio($(this).hasClass("")); 
    }); 
});

如果你想沒有if語句的基礎上，一類乾的解決方案：

$(document).ready(function() { 
    $('#audio').click(function() { 
    publisher.publishAudio($(this).hasClass("fa-microphone-slash"));  
    $(this).toggleClass("fa-microphone-slash"); 
    $(this).toggleClass("fa-microphone"); 
    }); 
});

第二個解決方案將使用fa-microphone標籤作爲是否執行靜音的布爾值。

來源

2015-09-16 17:12:38

嘿它好像靜音，但不是取消靜音 –

更新，看看是否修復您的問題，只有一種方式 –

進展。現在會發生什麼，如果我靜音，它靜音，如果我點擊取消靜音它取消靜音，但該圖標仍然是取消靜音，並且我無法通過單擊它來切換它們 –

我不知道的jQuery是很好，但這裏有一些簡單的JavaScript代碼來操縱類

$(document).ready(function() { 
    $('#audio').click(function() { 
     var audio = document.querySelector("#audio"); 

     // get current class state 
     var currentState = audio.getAttribute("class"); 

     // change class 
     if(currentState === "fa fa-microphone"){ 
      audio.setAttribute("class", "fa fa-microphone-slash"); 
     }else{ 
      audio.setAttribute("class", "fa fa-microphone"); 
     } 

    }); 
});

來源

2015-09-16 17:13:26 Prince

切換靜音並用javascript取消靜音

回答

相關問題