数组变量和函数的动态名称

Question

最近我一直在寻找动态变量名。我和window["varName"+dynamic part]的关系很好

但是，有什么方法可以用数组来实现呢？

var monster2_data=[2,"Ugly Gremlin",20,"1-4"]
var monster3_data=[3,"Gremlin Mage",20,"3-7"]

function create_enemy(number){
document.getElementById("image").src="i/monstras"+number+".jpg";
document.getElementById("image").style.height="350px";
document.getElementById("image").setAttribute( "onClick", window["startbattle"+number+"();"] );
document.getElementById("name_of_monster").innerHTML="<span style=\"color:rgb(181,230,29);margin-left:-125px;\"> Level " +monster3_data[0]+": </span>"+monster3_data[1];
document.getElementById("monster_damage").innerHTML="Damage: "+monster3_data[3];
document.getElementById("monsterhp").max=monster3_data[2];
document.getElementById("monsterhp").value=monster3_data[2];
    }

正如您在这部分代码中所看到的，我需要数组变量的动态名称。我也尝试过window，但它返回undefined

document.getElementById("image").setAttribute( "onClick", window["startbattle"+number+"();"] );

这一行特别返回为：onClick=undefined

monster3_data[2];的部分工作正常，但我需要它像monster(number)_data[2]一样

所以..。我的问题是:如何为函数和数组vars创建动态名称？

Answer 1

使用addEventListener添加事件处理程序。第二个参数是函数，而不是函数调用，因此不需要在其后面加上括号。

document.getElementById("image").addEventListener("click", window["startbattle"+number]);

如果要使用该属性，则应如下所示：

document.getElementById("image").onclick = window["startbattle"+number];

或者：

document.getElementById("image").setAttribute("onclick", "startbattle"+number+"();");

在最后一种情况下，您不需要window[...]，因为setAttribute将其第二个参数转换为字符串--您不能将函数本身放在那里。这将作为Javascript来执行，函数名称将在全局范围中查找，因此不需要指定window。

Answer 2

“我需要数组变量的动态名称。”不，你没有。没有他们会更好。反正我也这么认为。不要为每个怪物/级别分别设置变量，而是创建一个同时包含monster2_data和monster3_data的对象。(这是您所做的事情，只是您选择了window作为对象。您应该尽可能避免全局变量。)同时，startbattle2和startbattle3也应该包含在monster2_data和monster3_data中。

var monster_data = {
    '2': [2,"Ugly Gremlin",20,"1-4",startbattle2],
    '3': [3,"Gremlin Mage",20,"3-7",startbattle3]
};

var do_battle;

function create_enemy(number){
    var monster = monster_data[number];
    do_battle = monster[4];
    document.getElementById("image").src="i/monstras"+number+".jpg";
    document.getElementById("image").style.height="350px";
    document.getElementById("image").setAttribute( "onClick", "do_battle();" );
    document.getElementById("name_of_monster").innerHTML="<span style=\"color:rgb(181,230,29);margin-left:-125px;\"> Level " +monster[0]+": </span>"+monster[1];
    document.getElementById("monster_damage").innerHTML="Damage: "+monster[3];
    document.getElementById("monsterhp").max=monster[2];
    document.getElementById("monsterhp").value=monster[2];
}