我有一个创建按钮的函数，当我调用此函数创建不同的按钮时，所有按钮最终都以某种方式合并。 2天前，我开始使用JS，并花了几个月的时间学习了AS3。 JS对我来说看起来很奇怪，我几乎不了解该语言背后的逻辑，但是人们告诉我AS3和JS非常相似！
我尝试过课，打电话给新学生，...到目前为止还算不上运气：/我的想法真的耗尽了，无论我读什么，都不会点击。
var definitions = new Definitions();
var btnCounter = 0;
var btnHighlight = private function (row, column, imageLink, variable, callF) {
btnCounter++;
name = "btnHl " + btnCounter;
active = variable;
defintions = definitions;
callFunction = callF;
button = new PIXI.Sprite(PIXI.Texture.from(imageLink));
button.anchor.set(0.5);
button.width = definitions.buttonIconSize;
button.height = definitions.buttonIconSize;
highlight = new PIXI.Sprite(PIXI.Texture.from('images/highlightGfx.png'));
highlight.anchor.set(0.5);
highlight.width = definitions.buttonHighlightSize;
highlight.height = definitions.buttonHighlightSize;
buttonContainer = new PIXI.Container();
buttonContainer.buttonMode = true;
buttonContainer.interactive = true;
buttonContainer.buttonMode = true;
buttonContainer.y = definitions.editorItemSize / 2 + definitions.editorItemSize * row;
buttonContainer.x = definitions.editorItemSize / 2 + definitions.editorItemSize * column;
buttonContainer.addChild(button);
buttonContainer.on('pointerdown', onButtonDown = function () {
if (active) {
buttonContainer.removeChild(highlight);
active = false;
} else {
active = true;
buttonContainer.addChild(highlight);
}
if (callFunction != null) {
callFunction();
}
console.log(name);
});
if (active == true) {
buttonContainer.addChild(highlight);
}
return buttonContainer;
}
var testThis = function () {
console.log("clicked");
return this;
}
var btnDevicePhone = new btnHighlight(0, 0, 'images/transformGfx.png', true, testThis);
var btnDeviceTablette = new btnHighlight(0, 1, 'images/transformGfx.png', true, testThis);
var btnDeviceDesktop = new btnHighlight(1, 0, 'images/transformGfx.png', true, testThis);
var btnDeviceOrientation = new btnHighlight(1, 1, 'images/transformGfx.png', true, testThis);
var btnDrawSquare = new btnHighlight(2, 0, 'images/transformGfx.png', true, testThis);
var btnDrawCircle = new btnHighlight(2, 1, 'images/transformGfx.png', true, testThis);
var btnDropSquare = new btnHighlight(3, 0, 'images/transformGfx.png', true, testThis);
var btnDropCircle = new btnHighlight(3, 1, 'images/transformGfx.png', true, testThis);
app.stage.addChild(
btnDevicePhone,
btnDeviceTablette,
btnDeviceDesktop,
btnDeviceOrientation,
btnDrawSquare,
btnDrawCircle,
btnDropSquare,
btnDropCircle, );
Console.log始终为所有按钮打印相同的名称。不是所有的“新”调用都应该创建一个新对象？这是怎么回事？
答案 0 :(得分：0)
这是答案的更详细示例：
// this is a constructor function
// it "stands by itself", so no 'new' keyword, no var before it
// pay attention to the "this" before the variables you want as public properties
// this is the "skeleton" for your buttons (like a "scaffold")
function btnHighlight(counter, nameBase) {
this.counter = counter;
this.nameBase = nameBase;
this.name = function() {
return this.nameBase + "_" + this.counter
};
}
// mockup constructor function (stage) and object (app)
function stage() {
this.addChild = function(item) {
this.btns.push(item);
}
this.btns = [];
}
var app = {};
// this is just a mockup object
app.stage = new stage();
// creating 10 new buttons
for (i = 0; i < 10; i++) {
// here the "new" keyword is used, as we create
// a "new" button with every iteration
var newBtn = new btnHighlight(i, "btnHl");
// we add the new button to the stage
// this "imitates" the app.stage.addChild()
app.stage.addChild(newBtn);
}
// display the stage with the 10 buttons in the console
console.log("all the 10 buttons: ");
console.log(app.stage);
// or display just one button from the array - for example the fourth
// remember stage[0] is the first button!
console.log("the fourth button: ");
console.log(app.stage.btns[3]);
// or display just one button's name - for example the sixth
// see that "name" is a function, so it's called with parantheses after it
// remember stage[0] is the first button!
console.log("the sixth button's name: ");
console.log("sixth button's name: " + app.stage.btns[5].name());
// let's modify the second buttons nameBase property, and see that only that buttons name has changed:
app.stage.btns[1].nameBase = 'olive';
console.log("changed the second button's nameBase, so name is also changed: ");
app.stage.btns.forEach(item => console.log(item.name()))
所以您的代码看起来像这样：
var definitions = new Definitions();
var btnCounter = 0;
// the constructor function is created here
function btnHighlight(row, column, imageLink, variable, callF, btnCounter) {
// properties are added, using "this"
this.name = "btnHl " + btnCounter;
this.active = variable;
this.defintions = definitions;
this.callFunction = callF;
this.button = new PIXI.Sprite(PIXI.Texture.from(imageLink));
button.anchor.set(0.5);
button.width = definitions.buttonIconSize;
button.height = definitions.buttonIconSize;
this.highlight = new PIXI.Sprite(PIXI.Texture.from('images/highlightGfx.png'));
highlight.anchor.set(0.5);
highlight.width = definitions.buttonHighlightSize;
highlight.height = definitions.buttonHighlightSize;
this.buttonContainer = new PIXI.Container();
buttonContainer.buttonMode = true;
buttonContainer.interactive = true;
buttonContainer.buttonMode = true;
buttonContainer.y = definitions.editorItemSize / 2 + definitions.editorItemSize * row;
buttonContainer.x = definitions.editorItemSize / 2 + definitions.editorItemSize * column;
buttonContainer.addChild(button);
buttonContainer.on('pointerdown', onButtonDown = function() {
if (active) {
buttonContainer.removeChild(highlight);
active = false;
} else {
active = true;
buttonContainer.addChild(highlight);
}
if (callFunction != null) {
callFunction();
}
console.log(name);
});
if (active == true) {
buttonContainer.addChild(highlight);
}
return buttonContainer;
}
var testThis = function() {
console.log("clicked");
return this;
}
// creating the buttons, and then incrementing the counter
var btnDevicePhone = new btnHighlight(0, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDeviceTablette = new btnHighlight(0, 1, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDeviceDesktop = new btnHighlight(1, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDeviceOrientation = new btnHighlight(1, 1, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDrawSquare = new btnHighlight(2, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDrawCircle = new btnHighlight(2, 1, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDropSquare = new btnHighlight(3, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDropCircle = new btnHighlight(3, 1, 'images/transformGfx.png', true, testThis, btnCounter);
// adding the buttons to the stage
app.stage.addChild(
btnDevicePhone,
btnDeviceTablette,
btnDeviceDesktop,
btnDeviceOrientation,
btnDrawSquare,
btnDrawCircle,
btnDropSquare,
btnDropCircle, );
我不确定，您在此处修改的代码是否没有错误（因为我无法对其进行测试），但是它应该可以正常工作。
编辑
最终答案可以在 codepen.io
上找到