Question

您好我正在尝试通过单击按钮禁用某个功能，然后在单击另一个按钮后再次启用它我已尝试解除绑定但我没有在哪里我有什么建议可以解决这个问题吗？

代码：

<a href="#" class="MuteOn">Mute</a>
<a href="#" class="MuteOff">Unmute</a>

$('.MuteOn').on('click tap touch', function() {
//Disable soundListen function
 });

$('.MuteOff').on('click tap touch', function() {
//Enable soundListen function
 });

//

setInterval(function soundListen() {
    if ($("body").hasClass("fp-viewing-1")) {
        audio1.play();

    } else {
        audio1.pause();
        audio1.currentTime = 0;
    }

    if ($("body").hasClass("fp-viewing-2")) {
        audio2.play();
    } else {
        audio2.pause();
        audio2.currentTime = 0;
    }

    if ($("body").hasClass("fp-viewing-3")) {
        audio3.play();
    } else {
        audio3.pause();
        audio3.currentTime = 0;
    }
}, 100);

提前感谢您提出任何建议。

Answer 1

好的，所以我理解为这样： - 在第一页用户可以点击静音/取消静音按钮，并且应该在导航期间保存所有其他页面/幻灯片。

然后这是一个代码：

<!doctype>
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button id="mute">Mute</button>
        <button id="unmute">Unmute</button>
        <button id="reloadPage">Reload Page</button>
        <script type="text/javascript">

            //get variable from local variables or set to false(you can change it to TRUE if you like to mute on page load) by default
            var isMuted = localStorage.getItem("IsMuted")||false;

            //mute button onclick method
            $(document).on('click','#mute',function(e){
                isMuted = true;
                //save to local variables
                localStorage.setItem("IsMuted", isMuted);
            }); 

            //unmute button onclick method
            $(document).on('click','#unmute',function(e){
                isMuted = false;
                //save to local variables
                localStorage.setItem("IsMuted", isMuted);
            }); 

            //reload page. also you can use F5 or Ctrl+F5
            $(document).on('click','#reloadPage',function(e){
                location.reload();
            });

            $(document).ready(function(){
                alert("IsMuted = "+isMuted);

                //you can encapsulate this into separate function and bind to show-next-slide button                
                if(isMuted)
                {
                    return;
                }
                else
                {
                    //get clip id by class name or another suitable method
                    PlayMyCoolMusic(clipId);
                }
            });



            function PlayMyCoolMusic(clipId)
            {
                //your audio player logic here

            }
        </script>
    </body>
</html>

使用此功能，即使已重新加载页面，也可以保存静音/取消静音状态。

禁用并重新启用功能，静音和取消静音

1 个答案: