このJavaScriptをフレームワークなしで短くするか、より良くするにはどうすればよいですか？

Question

function prepareEventHandlers() { 
    var sectionButton1 = document.getElementById("sectionButton1"); 
    var sectionButton2 = document.getElementById("sectionButton2"); 
    var sectionButton3 = document.getElementById("sectionButton3"); 
    var sectionButton4 = document.getElementById("sectionButton4"); 
    var sectionButton5 = document.getElementById("sectionButton5"); 

    var enabled1 = true; 
    var enabled2 = false; 
    var enabled3 = false; 
    var enabled4 = false; 
    var enabled5 = false; 


    function checkEnabled() { 
     if (enabled1) { 
      sectionButton1.setAttribute("class", "sectionButtonEnabled"); 
     } 
     if (enabled2) { 
      sectionButton2.setAttribute("class", "sectionButtonEnabled"); 
     } 
     if (enabled3) { 
      sectionButton3.setAttribute("class", "sectionButtonEnabled"); 
     } 
     if (enabled4) { 
      sectionButton4.setAttribute("class", "sectionButtonEnabled"); 
     } 
     if (enabled5) { 
      sectionButton5.setAttribute("class", "sectionButtonEnabled"); 
     } 

    } 

    checkEnabled(); 
    sectionButton1.onmouseover = function() { 
     if (enabled1) { 
      sectionButton1.setAttribute("class", "sectionButtonOver"); 
     } 
    }; 
    sectionButton1.onmouseout = function() { 
     if (enabled1) { 
      sectionButton1.setAttribute("class", "sectionButtonEnabled"); 
     } 
    }; 
    sectionButton2.onmouseover = function() { 
     if (enabled2) { 
      sectionButton2.setAttribute("class", "sectionButtonOver"); 
     } 
    }; 
    sectionButton2.onmouseout = function() { 
     if (enabled2) { 
      sectionButton2.setAttribute("class", "sectionButtonEnabled"); 
     } 
    }; 
    sectionButton3.onmouseover = function() { 
     if (enabled3) { 
      sectionButton3.setAttribute("class", "sectionButtonOver"); 
     } 
    }; 
    sectionButton3.onmouseout = function() { 
     if (enabled3) { 
      sectionButton3.setAttribute("class", "sectionButtonEnabled"); 
     } 
    }; 
    sectionButton4.onmouseover = function() { 
     if (enabled4) { 
      sectionButton4.setAttribute("class", "sectionButtonOver"); 
     } 
    }; 
    sectionButton4.onmouseout = function() { 
     if (enabled4) { 
      sectionButton4.setAttribute("class", "sectionButtonEnabled"); 
     } 
    }; 
    sectionButton5.onmouseover = function() { 
     if (enabled5) { 
      sectionButton5.setAttribute("class", "sectionButtonOver"); 
     } 
    }; 
    sectionButton5.onmouseout = function() { 
     if (enabled5) { 
      sectionButton5.setAttribute("class", "sectionButtonEnabled"); 
     } 
    }; 
} 


window.onload = function() { 
    prepareEventHandlers(); 
}; 

Answer 1

いつでもあなた自身が「foo1の」、「foo2は」のような変数名を書く見つけ、あなたのイベントを追加するaddEventListenerを使用して検討する必要があり、それらはすべて同じことを多かれ少なかれ実行します。本当に配列を停止し、バックアップし、宣言する必要があります。今

function prepareEventHandlers() { 
    var sectionButtons = []; 
    for (var i = 1; i <= 5; ++i) 
     sectionButtons[i] = document.getElementById('sectionButton' + i); 

    var enabled = [ true, false, false, false, false ]; 

    function checkEnabled() { 
     for (var i = 1; i <= 5; ++i) 
      if (enabled[i]) sectionButtons[i].className = 'sectionButtonEnabled'; 
    } 

    checkEnabled(); 

    for (i = 1; i <= 5; ++i) { 
     sectionButton[i].onmouseover = function(i) { 
     return function() { 
      if (enabled[i]) sectionButton[i].className = 'sectionButtonOver'); 
     } 
     }(i); 
     sectionButton[i].onmouseout = function(i) { 
     return function() { 
      if (enabled[i]) sectionButton[i].className = 'sectionButtonEnabled'; 
     }(i); 
    } 
} 


window.onload = function() { 
    prepareEventHandlers(); 
}; 

、他の二つの事柄：

1. は "のsetAttribute（）" と "class" 属性を設定しないでください。代わりに、DOM要素の "className"プロパティを操作します。

2. クラスを直接これらの文字列に設定するのではなく、独自の "addClass（）"および "removeClass（）"関数を作成することをお勧めします。クラスは、クラス名のリストで、スペースで区切ることができます。

   function addClass(elem, c) { 
       elem.className += ' ' + c; 
   } 
   
   function removeClass(elem, c) { 
       elem.className = elem.className.replace(new RegExp('\\b' + c + '\\b', 'g'), '')); 
   } 
   

Answer 2

EDIT

私は配列にデータを格納話して他の回答の多くに同意するが、代わりに、並列配列で、私は、オブジェクトの配列使用します。

var i, buttonData = []; 
for(i = 1; i <= 5; i++) 
    buttonData.push({ "enabled" : false, 
        "button": document.getElementById("sectionButton" + i) }); 
buttonData[0].enabled = true; 

を

そして：

for (i = 0; i < buttonData.length; i++) { 
    setClassIfEnabled(buttonData[i].enabled, buttonData[i].button) 
} 

それともしたい場合それをシンプルに保つため、以下のオリジナルの答えはまだあなたの元のバージョンのうちの多くのコードをチョップします：

---

リファクタリングは、ヘルパーメソッドにコードを重複

function setClassIfEnabled(enabled, button){ 
    if (enabled) { 
      button.setAttribute("class", "sectionButtonEnabled"); 
    } 
} 

そして

function checkEnabled() { 
    setClassIfEnabled(enabled1, sectionButton1); 
    setClassIfEnabled(enabled2, sectionButton2); 
    setClassIfEnabled(enabled3, sectionButton3); 
    setClassIfEnabled(enabled4, sectionButton4); 
    setClassIfEnabled(enabled5, sectionButton5); 
} 

また

function setMouseOverIfEnabled(enabled, button) { 
    button.onmouseover = function() { 
     if (enabled) { 
      button.setAttribute("class", "sectionButtonEnabled"); 
     } 
    }; 
} 

setMouseOverIfEnabled(enabled1, sectionButton1); 
setMouseOverIfEnabled(enabled2, sectionButton2); 
setMouseOverIfEnabled(enabled3, sectionButton3); 
setMouseOverIfEnabled(enabled4, sectionButton4); 
setMouseOverIfEnabled(enabled5, sectionButton5); 

そしてもちろん。またmouseout

のために同じことを行う、あなたは

function setMouseOverIfEnabled(enabled, button) { 
    button.addEventListener("mouseover", function() { 
     if (enabled) { 
      button.setAttribute("class", "sectionButtonEnabled"); 
     } 
    }); 
} 

Answer 3

ここに凝縮されたバージョンがあります：このような機能は、次のようになります。異なる変数だけでコードのブロックを繰り返すことは絶対にありません。ループを使用するか、ローカル関数を作成します。あなたのIDは、シーケンシャルなので、ループはここでうまく動作します。この場合、：

function prepareEventHandlers() 
{ 
    var button; 
    var enabled = [true, false, false, false, false]; 
    for (var i = 0; i < enabled.length; i++) { 
     button = document.getElementById("sectionButton" + (i + 1)); 
     button.buttonEnabled = enabled[i]; 
     if (button.buttonEnabled) { 
      button.className = "sectionButtonEnabled"; 
     } 
     button.onmouseover = function() { 
      if (this.buttonEnabled) { 
       this.className = "sectionButtonOver"; 
      } 
     } 
     button.onmouseout = function() { 
      if (this.buttonEnabled) { 
       this.className = "sectionButtonEnabled"; 
      } 
     } 
    } 
} 

また、このコードは、ボタンのbuttonEnabled財産および/またはクラス名を操作して、後で他のコードでボタンを有効にすることができますし、イベントハンドラは自動的に正しいことを行います。

Answer 4

最初に：オンスタイルのボタンにonmouseoverとonmouseoutを使用するのは、1990年代のものです。あなたは今、CSSで同じことをすることができます。

.sectionButtonEnabled  { regular styles here } 
.sectionButtonEnabled:hover { mouseover styles here } 

（注、IEのために、これは「標準モード」が必要 - 読み：DOCTYPEラインを持っている - 以降およびIE7または）今

、あなたは本当に物事に古いを行いたい場合壊れてしまいます...

function prepareEventHandlers() { 
    var buttons = [ 
     "sectionButton1", 
     "sectionButton2", 
     "sectionButton3", 
     "sectionButton4", 
     "sectionButton5" 
    ]; 
    var enabled = [ true, false, false, false, false ]; 

    for (var i = 0; i < buttons.length; ++i) { 
     var elem = document.getElementById(buttons[i]); 
     if (enabled[i]) { 
      elem.className = "sectionButtonEnabled"; 

      // Since you're only attaching the event handler to enabled buttons, 
      // you already know that `enabled` is true. So you don't even need to 
      // check, since there's no way to change your local variable. 

      elem.onmouseover = function() { 
       this.className="sectionButtonOver"; 
      }; 
      elem.onmouseout = function() { 
       this.className="sectionButtonEnabled"; 
      }; 
     } 
    } 
} 

マウスオーバーハンドラーが必要ない場合は、それらを取り除き、上記のCSSを使用してください。