変数を使用してjavascriptの繰り返しを減らそうとしています

Question

私のコードでは繰り返しは減らしたいが運がないとしている。私はコードを、その機能を試して動作させるための最も単純な機能にまで減らしました。

アイデア名の最後の2文字は、以前に宣言された変数と同じ文字で、古い変数を参照するために使用されます。

アラートを使用して、適切な出力が得られているかどうかをテストし、アラートウィンドウが「E1」とポップアップすることを確認しました。だから私はそれを試して使用するときになぜそれが効かないのか、本当にわかりません。

E1 = new Audio('audio/E1.ogg'); 

$('#noteE1').click(function() { 
    var fileName = this.id.slice(4); 
    //alert(fileName); used to test output 
    fileName.play(); 
    $('#note' + fileName).addClass('active'); 
}); 

I代わりfileNameにの元の変数E1を使用する場合、コード・ブロックが動作します。 fileNameを使用したいのですが、私はこの機能を各要素に対して繰り返す代わりに、クリックしたときに複数の要素に対して機能させたいと考えています。

どうすればこの作品を作成できますか？私は何が欠けていますか？

ありがとうございました。

Answer 1

fileNameはまだ文字列です。 JavaScriptでは、同じ名前の変数を使用することがわかりません。文字列にplay()メソッドを呼び出していますが、もちろん存在しません（したがって、エラーが発生します）。

提案：表中の

ストアあなたのオブジェクトを：

var files = { 
    E1: new Audio('audio/E1.ogg') 
}; 

$('#noteE1').click(function() { 
    var fileName = this.id.slice(4); 
    //alert(fileName); used to test output 
    files[fileName].play(); 
    $('#note' + fileName).addClass('active'); 
}); 

---

もう一つの提案：

代わりのファイルに関する情報を保持するためのIDを使用して、 HTML5 data attributesを使用することを検討してください：

<div id="#note" data-filename="E1">Something</div> 

次にあなたが名前を取得することができます：これはあなたのコードはより柔軟になり

var filename = $('#note').data('filename'); 

。要素に特定の形式のIDを付けることには依存していません。