Question

我正在尝试创建一个静音和取消静音的按钮。

最初我按钮设置如下：

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

基本上将它静音，现在我需要制作它，这样当我点击按钮时它也可以取消静音

Answer 1

使用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语句的DRY解决方案，基于类：

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

第二种解决方案只是使用fa-microphone标签作为是否执行静音的布尔值。

Answer 2

我不太了解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");
        }

    });
});

Answer 3

您可以检查发布商是否正在自行发送视频/音频，如下所示：

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

使用javascript切换静音和取消静音

3 个答案: