尝试使用变量减少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，因为我希望这个函数可以在单击时为多个元素工作，而不是为每个元素重复

我怎样才能做到这一点？我错过了什么

谢谢。

文件名仍然是一个字符串。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保存文件的信息，请考虑使用：

这使您的代码更加灵活。您不依赖于以特定格式为元素提供ID。

文件名仍然是字符串。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保存文件的信息，请考虑使用：

---

这使您的代码更加灵活。您不依赖于以特定格式为元素提供ID。

我尝试了您的第一个建议，但不幸的是，它没有起作用。文件无法播放。+1，尽管我不同意id的说法。ID无论如何都必须是唯一的，没有特别的理由不使用它来索引文件，添加数据属性只会增加标记的大小。@tw16:文件不会播放。我刚刚修复了Felix代码中的一个小语法错误，不应该出现错误；在E1的末尾：。。。线尝试更新。除了语法错误之外，建议是非常好的。非常感谢。我尝试了你的第一个建议，但不幸的是没有成功。文件无法播放。+1，尽管我不同意id的说法。ID无论如何都必须是唯一的，没有特别的理由不使用它来索引文件，添加数据属性只会增加标记的大小。@tw16:文件不会播放。我刚刚修复了Felix代码中的一个小语法错误，不应该出现错误；在E1的末尾：。。。线尝试更新。除了语法错误之外，建议是非常好的。非常感谢。使用正确的语法，它可以正常工作。

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