尝试使用变量减少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');
});

另一个建议是:

请考虑使用HTML5 data属性,而不是使用ID来保存有关文件的信息:

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

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

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

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