我对各种设计结构和OOP都很陌生。我想要做的是创建一个函数，它将生成一个菜单图标，在鼠标悬停/鼠标移动期间动画。因此，我将调用该函数并输入（x，y，width，height等）并允许它生成带有一些动画功能的菜单图标。我试图使用“this”关键字有一些通用模型，以帮助更轻松地生成多个菜单。但是我不能将“this”关键字应用到函数中。请告诉我一些我应该做的建议。提前致谢。
function button(x, y, width, height, text1, text2) {
paperWidth = width +10;
paperHeight = height + 10;
this.paper = Raphael(x, y, paperWidth, paperHeight); // sets the paper dimension with x and y coordinates
// menu box variables
this.rectFrontX = x+20; this.rectFrontY = y+20; this.rectFrontWidth = 70; this.rectFrontHeight = 45;
this.rectBackX = x+10; this.rectBackY = y+10; this.rectBackWidth = 95; this.rectBackHeight = 67;
// text variables
this.textLine1X = x+45+10; this.textLine1Y = y+25+10;
this.textLine2X = x+45+10, this.textLine2Y = y+35+15;
// menu box variables
rectFrontX = x+20; rectFrontY = y+20; rectFrontWidth = 70; rectFrontHeight = 45;
rectBackX = x+10; rectBackY = y+10; rectBackWidth = 95; rectBackHeight = 67;
// text variables
textLine1X = x+45+10; textLine1Y = y+25+10;
textLine2X = x+45+10, textLine2Y = y+35+15;
//testing variables only, not using
currentX = x;
currentY= y;
this.x = x; this.y = y;
// initialize menu variables
var backBox = this.paper.rect(this.rectBackX, this.rectBackY, this.rectBackWidth, this.rectBackHeight).attr({fill: "white", "cursor": "pointer"});
var midBox = this.paper.rect(this.rectFrontX, this.rectFrontY, this.rectFrontWidth, this.rectFrontHeight).attr({fill: "#CCC", opacity: 0.0, "cursor": "pointer"});
var frontBox = this.paper.rect(this.rectFrontX, this.rectFrontY, this.rectFrontWidth, this.rectFrontHeight).attr({fill: "gray", opacity: 1.0, "cursor": "pointer"}); //dark grey menu box
var backLineTop = this.paper.text(this.textLine1X, this.textLine1Y, text1).attr({"font-size":14, "fill": "#fff", "cursor": "pointer"});
var backLineBottom = this.paper.text(this.textLine2X, this.textLine2Y, text2).attr({"font-size":14, "fill": "#fff", "cursor": "pointer"});
var frontLineTop = this.paper.text(this.textLine1X, this.textLine1Y, text1).attr({"font-size":14, "fill": "#fff", "opacity": 0.0, "cursor": "pointer"});
var frontLineBottom = this.paper.text(this.textLine2X, this.textLine2Y, text2).attr({"font-size":14, "fill": "#fff", "opacity": 0.0, "cursor": "pointer"});
var menuOverlay = this.paper.rect(this.rectBackX, this.rectBackY, this.rectBackWidth, this.rectBackHeight).attr({"fill": "red", "cursor": "pointer", "opacity": 0.3}); // overlays menu box for
menuOverlay.mouseover(function() {
// set initial property values before animation
frontBox.attr({"x": rectFrontX, "y": rectFrontY});
midBox.attr({"x": x, "y": y});
frontLineTop.attr({"x": textLine1X-20, "y": textLine1Y-20, "font-size": 6, opacity: 1.0});
frontLineBottom.attr({"x": textLine2X-20, "y": textLine2Y-20, "font-size": 6, opacity: 1.0});
backLineTop.attr({"x": textLine1X, "y": textLine1Y-20, "font-size": 6, opacity: 1.0});
backLineBottom.attr({"x": textLine2X, "y": textLine2Y-20, "font-size": 6, opacity: 1.0});
// animation values
frontBox.animate({"x": currentX+40, "y": currentY+30, "width": rectFrontWidth, "height": rectFrontHeight,"opacity": 0.0}, 1000, "linear"); // frontbox fading away from screen
midBox.animate({"x": currentX+20, "y": currentY+20, "width": rectFrontWidth, "height": rectFrontHeight, "opacity": 1.0, "fill": "#CCC"}, 1500, "bounce"); // midbox drops in from the top left
frontLineTop.animate({"font-size": 14, "x": textLine1X, "y": textLine1Y, "opacity": 1.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 to X
frontLineBottom.animate({"font-size": 14, "x": textLine2X, "y": textLine2Y, "opacity": 1.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
backLineTop.animate({"font-size": 6, "x": textLine1X+35, "y": textLine1Y+65, "opacity": 0.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 to X
backLineBottom.animate({"font-size": 6, "x": textLine1X+35, "y": textLine1Y+35, "opacity": 0.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
});
menuOverlay.mouseout(function() {
// set initial property values before animation
frontBox.attr({"x": rectFrontX, "y": rectFrontY-20, "opacity": 1.0 });
midBox.attr({"x": rectFrontX+0, "y": rectFrontY+0});
backLineTop.attr({"x": textLine1X, "y": textLine1Y-20, "font-size": 6, opacity: 1.0, "fill": "white"});
backLineBottom.attr({"x": textLine2X, "y": textLine2Y-20, "font-size": 6, opacity: 1.0, "fill": "white"});
// animation values
midBox.animate({"x": rectFrontX+40, "y": rectFrontY+20, "width": rectFrontWidth, "height": rectFrontHeight, "opacity": 0.0 }, 1500, "bounce");
frontBox.animate({"x": rectFrontX, "y": rectFrontY, "width": rectFrontWidth, "height": rectFrontHeight,"opacity": 1.0, "fill": "gray"}, 1500, "bounce"); // frontbox fading away from screen
backLineTop.animate({"font-size": 14, "x": textLine1X, "y": textLine1Y, "opacity": 1.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 to X
backLineBottom.animate({"font-size": 14, "x": textLine2X, "y": textLine2Y, "opacity": 1.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
frontLineTop.animate({"font-size": 14, "x": textLine1X+20, "y": textLine1Y+15, "opacity": 0.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 to X
frontLineBottom.animate({"font-size": 14, "x": textLine2X+20, "y": textLine2Y+15, "opacity": 0.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
});
}
// I will then call the function to create the menu icon
var testMenuIcon = new button(10, 10, 120, 120, "menu text line 1", "menu text line 2");
现在的问题是，当我尝试在鼠标悬停功能中使用“this”关键字时，它无法在那里获得“this”变量，所以如果我创建多个菜单图标的x，y值之间2个或更多菜单图标全部混淆，因为相同的值似乎用于不同的菜单图标。请告知最佳方法是什么。
答案 0 :(得分：0)
您无法访问this内的mouseover菜单实例，因为这现在意味着不同的范围。所以要解决这个问题
function button(x, y, width, height, text1, text2) {
//Your code
//based on your logic use
var self = this;
//or
var self = menuOverlay;
menuOverlay.mouseover(function() {
//You can use self to access the menu now (self.whatever)
}
}