javascript - 在动态生成的按钮上添加多个操作
问题描述
我已经动态生成了按钮。我想为此按钮添加一个单击和 onInputOver 操作,但只有该click(chooseHero)
按钮有效:
编辑 FULL_CODE
var heroesState = {
create: function() {
//game.add.image(0, 0, 'board');
backBtn = game.add.button(5, 5, 'back_btn', this.GoBack);
choiceText = game.add.bitmapText(150, 50, 'desyrel', 'Welcome warrior, Choose your Hero', 35);
//var heroCardStyle = { fill: "#00ff00" };
var initWidth = 60;
var initHeight = 150;
var heroesFiles = ["obatala.jpg", "obba.jpg", "olokun.jpg", "orunmila.jpg", "oshun.jpg",
"oxosi.jpg", "oya.jpg", "ozain.jpg", "shango.jpg", "yemoja.jpg"
];
var heroesLength = heroesFiles.length;
var heroCard = [];
//4 buttons generated dynamically with a loop
for (var i = 0; i < heroesLength / 2; i++) {
//longueur de chaque élément dans heroes
var ln = heroesFiles[i].length;
heroCard = game.add.button(initWidth, initHeight, heroesFiles[i].substring(0, ln - 4), this.ChooseHero, this.over);
heroCard.scale.setTo(0.5, 0.5);
heroCard.alpha = 0.4;
initWidth = initWidth + 150;
};
var initWidth = 60;
var initHeight = 350;
//4 buttons generated dynamically with a loop
for (var i = heroesLength / 2; i < heroesLength; i++) {
//longueur de chaque élément dans heroes
var ln = heroesFiles[i].length;
heroCard = game.add.button(initWidth, initHeight, heroesFiles[i].substring(0, ln - 4), this.ChooseHero, this.over);
heroCard.scale.setTo(0.5, 0.5);
heroCard.alpha = 0.4;
initWidth = initWidth + 150;
};
//heroCard.onInputOver.add(over, this);
},
//functions associated to button events(chooseChero works fine but over doesn't work)
GoBack: function() {
game.state.start("menu");
},
over: function() {
heroCard.tint = 0xffffff;
},
ChooseHero: function() {
//game.state.start("menu");
chosenHero = this.key;
alert(this.key);
game.state.start("play", true, false, chosenHero);
}
};
我收到此错误:无法读取未定义的属性“onInputOver”。
解决方案
从附加代码中,我可以看到以下问题:
game.add.button()
有不同的签名。从官方文档中我们可以看到:
new Button(game [, x] [, y] [, key] [, callback] [, callbackContext] [, overFrame] [, outFrame] [, downFrame] [, upFrame])
overFrame
, outFrame
, downFrame
, 并且upFrame
都在寻找要在正在使用的图形上使用的框架,而不是要调用的函数。
var heroCard = [];
正在用于初始化变量,但随后您将其设置为实际按钮。我可能会建议将其更改为heroCards
然后heroCard
在for
循环中创建一个新的,在将其添加到heroCards
数组之前在那里定义它的属性。heroCard.onInputOver.add(over, this);
应该在你的 for 循环中。如果您console.log(arguments);
可以看到返回了两个参数,这使您可以使用第一个参数来修改它们悬停的按钮:over: function(heroCard) { heroCard.tint = 0xffffff; // This is a quick and dirty way to see what arguments are being passed // to a function in JavaScript. // console.log(arguments); }
推荐阅读
- javascript - 使用列选项“order”的引导表列默认排序
- php - 如何在php上创建html标签结构
- java - GWT 应用程序未实现前端更改
- javascript - 如何使用 Javascript 从 tr 获取第一个 td 值?
- html - 如果未找到 ID,如何默认 SVG 精灵
- javascript - 使用 javascript UDF 在 BigQuery 中对整数数组的值求和
- python - 在 pandas 中按组连续获得最长连续周数
- jquery - 未捕获的类型错误:无法读取 null 的属性“按钮”
- zsh - ZSH“找不到命令:z”
- java - 如何让spring cron作业由spring boot的app用户以外的用户执行