試圖減少重複的JavaScript使用變量

我想減少我的代碼中的重複，但沒有任何運氣。我將代碼簡化爲最簡單的功能，以嘗試使其運行。試圖減少重複的JavaScript使用變量

這個想法是採取id名稱的最後兩個字母，因爲這些字母與以前聲明的變量相同，並用它來引用舊的變量。

我用警報測試我是否得到正確的輸出，並彈出警告窗口說「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'); 
});

的代碼塊的工作，當我用原來的變量E1，而不是文件名。我想使用fileName，因爲我希望這個功能可以在點擊時使用多個元素，而不是爲每個元素重複使用。

我該如何做這項工作？我錯過了什麼？

謝謝。

來源

2011-06-26 tw16

fileName仍然是字符串。 JavaScript不知道你想使用具有相同名稱的變量。你在一個字符串上調用play()方法，這當然不存在（因此你會得到一個錯誤）。

建議：

Store中的對象的表：

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。

來源

2011-06-26 10:18:21

我嘗試了你的第一個建議，但不幸的是它沒有奏效。該文件不會播放。 – tw16

+1，但我不同意'id'的東西。無論如何，ID必須是唯一的，沒有特別的理由不使用它來索引'files'並添加'data-'屬性只會增加標記的大小。 –

@ tw16：*「文件不會播放。」*我只是在Felix的代碼中修正了一個小的語法錯誤（在'E1：...行末尾不應該有';'）。嘗試更新。除了語法錯誤之外，這個建議還是非常棒的。 –

試圖減少重複的JavaScript使用變量

回答

相關問題