尝试使用变量减少 JavaScript 的重复

Question

我正在尝试减少代码中的重复，但没有任何运气。我将代码简化为最简单的功能，以尝试使其正常工作。

这个想法是采用 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 时，代码块有效。我想使用 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 属性：

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

然后您可以通过以下方式获取名称：

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

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