javascript - 尝试使用变量减少 javascript 的重复

Question

我正在努力减少代码中的重复，但没有成功。我将代码缩减为最简单的功能，以尝试让它正常工作。

想法是采用 id 名称的最后两个字母，因为这些字母与先前声明的变量相同，并使用它来引用旧变量。

我使用 alert 来测试我是否获得了正确的输出，并且弹出了提示窗口“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 时，代码块有效。我想使用 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。