例えば

Question

ジャバスクリプトを通じてSPANタグを無効にする方法を、私はスパンを持っています（完全に正常に動作します）

<span class="alphStyle" id="a1">a</span> 
<span class="alphStyle" id="a2">b</span> 
<span class="alphStyle" id="a3">c</span>... 

...とそう

上と機能をクリックしてください：

var on = document.querySelectorAll(".alphStyle");  
for (var i = 0; i < on.length; i++){ 
     on[i].addEventListener('click', function(){ 
      var whatLetter = this.innerHTML; 
      var num = 0; 
      var trueCount = 0; 
      for (num = 0; num < guessWord.length; num++) { 
       if (whatLetter == guessWord.charAt(num)) { 
        secretW.getElementsByClassName("lineStyle")[num].innerHTML = whatLetter; 
        this.style.backgroundColor = "rgb(65,208,65)"; 
        trueCount++; 
        trueCount2++; 
       } 
      } 
      if (trueCount == 0) { 
       mistake(); 
       this.style.backgroundColor = "rgb(255,100,100)"; 
      } 
      this.disabled = true;//this one doesn't work 

     }); 
    } 

それは私がすでにクリックしたスパンを無効にしたいという点を除いて、完璧に機能します。出来ますか？ここにどのようなコードを追加すればよいですか？

Answer 1

スパンをクリックすると、データ属性を設定/確認できます。

var on = document.querySelectorAll(".alphStyle");  
for (var i = 0; i < on.length; i++){ 
    on[i].addEventListener('click', function(){ 
     if(this.dataset.disabled!="yes") { 
     var whatLetter = this.innerHTML; 
     var num = 0; 
     var trueCount = 0; 
     for (num = 0; num < guessWord.length; num++) { 
      if (whatLetter == guessWord.charAt(num)) { 
       secretW.getElementsByClassName("lineStyle")[num].innerHTML = whatLetter; 
       this.style.backgroundColor = "rgb(65,208,65)"; 
       trueCount++; 
       trueCount2++; 
      } 
     } 
     if (trueCount == 0) { 
      mistake(); 
      this.style.backgroundColor = "rgb(255,100,100)"; 
     } 
     this.dataset.disabled = "yes"; 
     } 
    }); 
} 

ここ

実施例は、https://jsfiddle.net/yd7w62e6/1/

Answer 2

将来のクリックによるクリックハンドラのトリガを防ぐことを目標にしている場合は、removeEventListener()を使用してクリックハンドラを削除できます。これを行うには、後で参照できる変数にリスナーを割り当てる必要があります。

var on = document.querySelectorAll(".alphStyle");  

var handler = function(){ 
    // ... 
    this.removeEventHandler('click', handler); 
}; 
for (var i = 0; i < on.length; i++){ 
    on[i].addEventListener('click', handler); 
}