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');
});

另一个建议：

请考虑使用HTML5 data attributes：

，而不是使用ID来保存有关文件的信息

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

然后你可以得到这个名字：

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

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

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

1 个答案: