クリックして無効にして、setIntervalを有効にする

Question

こんにちは、私は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; 
      } 
} 

は

Answer 1

私はミュートボタン用の共通クラスを追加し、クリックされたとき、MuteOn/MuteOffクラスを確認する（またはブール値を使用）する任意の助けてくれてありがとうあなたがする必要があることをしてください。

MuteOffの要素が読み込まれていないため、MuteOffのクリックが機能しません。 @Santiが述べたように

設定MuteOn /オフマークアップで

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

また、イベントの委任方法を使用することができますが、上記の方が簡単な場合があります今理解する。

Direct vs. Delegated - jQuery .on()