javascript - 在单击禁用和启用setInterval

嗨，我正在尝试禁用setInterval，我已经做过多次无法再次启用它的操作，并且"mute"按钮的类没有更改，有人可以向我指出正确的方向吗，这是我的代码

HTML：

<a href="#" class="MuteOff">button</a>

  按键：

$('.MuteOn').on('click tap touch', function() {
$('.MuteOn').removeClass("MuteOn").addClass("MuteOff"); //the class changes
clearInterval(MyTimer);
 });

$('.MuteOff').on('click tap touch', function() {
$('.MuteOff').removeClass("MuteOff").addClass("MuteOn"); //the class doesn't change back to MuteOn
MyTimer = setInterval(Checker, 100); //doesn't work
 });

  功能：

var MyTimer = setInterval(Checker, 100);
 function Checker(){

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

感谢您的任何帮助

最佳答案

我将为静音按钮添加一个通用类，然后单击该类，检查MuteOn / MuteOff类（或使用布尔值），然后执行所需的操作。

您的MuteOff单击不起作用，因为加载时不存在MuteOff元素。

在标记中设置MuteOn / Off

的HTML

<a href="#" class="mute-button MuteOff">button</a>

JS

$('.mute-button').on('click tap touch', function() {
    var $this = $(this);

    if( $this.hasClass("MuteOn") ) {
         // do mute off stuff
         $this.removeClass("MuteOn").addClass("MuteOff");
         clearInterval(MyTimer);
    } else {
         // do mute on stuff
         $this.removeClass("MuteOff").addClass("MuteOn");
         MyTimer = setInterval(Checker, 100);
    }
});

您也可以使用事件委托方式（如@Santi所述），但是现在上面的内容可能更容易理解。

Direct vs. Delegated - jQuery .on()