在循环中分配容器 Y 位置答案

【问题标题】：Assigning a containers Y position In loop在循环中分配容器 Y 位置
【发布时间】：2016-06-27 05:29:29
【问题描述】：

我想让我的“definitionContainer”的 Y 位置与“questionMarkContainer”的 Y 位置相同。

我不确定如何保存 questionMarkContainer 的 Y 位置，并在单击 questionMarkContainer 时将其应用于“definitionContainer” Y 位置。

我试过了定义容器.myNewCords = xOffsetNumberContainer; 定义容器.y = 定义容器.myNewCords;

我怎样才能完成任务。

 function writeOutDefinitionsQuestionMarksOnRight() {
        var yOffsetNumberContainer = 102;

            for (var c = 0; c < randomTermsForUserSorting.length; c++) {

                var questionMarkContainer = new createjs.Container();
                var Highlight = new createjs.Shape();
                Highlight.graphics.beginFill("hotPink").drawRoundRect(0, 0, 30, 25, 5);
                var HighLightlabel = new createjs.Text("?", "10pt arial bold", "white");
                HighLightlabel.textAlign = "center";
                HighLightlabel.x = 15
                HighLightlabel.y = 5
                questionMarkContainer.addChild(Highlight, HighLightlabel);
                self.stage.addChild(questionMarkContainer);
                questionMarkContainer.x = 720;
                questionMarkContainer.y = yOffsetNumberContainer;
                questionMarkContainer.termIndex = c;

                // calling a function to return the clickHandler function
                // because there was some crazy stuff with using the closure of 
                // termIndex where the clickHandler function was always the last index.
                // The 'usual' method of getting around this situation wasnt working for some reason.
                var clickHandler = (function (termIndex) {
                    return function (e) {
                        var definitionContainer = new createjs.Container();

                        definitionContainer.myNewCords = yOffsetNumberContainer;

                        rect = new createjs.Shape();
                        rect.graphics.beginFill("DarkGreen").drawRoundRect(0, 0, 350, 150, 8);

                        var name = new createjs.Text(randomTermsForUserSorting[termIndex].Name, "12pt arial", "white");
                        name.x = 5;
                        name.y = 5;
                        name.lineWidth = 300;

                        var definitionText = new createjs.Text(randomTermsForUserSorting[termIndex].Definition, "10pt arial", "white");
                        definitionText.x = 5;
                        definitionText.y = 35;
                        definitionText.lineWidth = 330;

                        var xButtonRectangle = new createjs.Shape();
                        xButtonRectangle.graphics.beginFill("red").drawRoundRect(320, 5, 20, 20, 2);

                        var xTextCloseButton = new createjs.Text("X", "10pt arial", "white");
                        xTextCloseButton.x = 325;
                        xTextCloseButton.y = 7;

                        definitionContainer.addChild(rect, name, definitionText,xButtonRectangle, xTextCloseButton);

                        self.stage.addChild(definitionContainer);
                        definitionContainer.x = 300;

                        definitionContainer.y = yOffsetNumberContainer;

                        definitionContainer.addEventListener("click", function () {
                            self.stage.removeChild(definitionContainer);
                        });
                    }
                })(c);

                questionMarkContainer.addEventListener("click", clickHandler);
                yOffsetNumberContainer += 40;
            }

        }

【问题讨论】：

标签： javascript html5-canvas createjs

【解决方案1】：

看起来您只是在调整单个 yOffsetContainer 属性，该属性在 click 函数中被引用。单击稍后触发，并将使用已设置为项目数 x 40 的 yOffsetContainer 变量。它不会在每个项目内保存循环值。

您应该能够将循环值作为参数传递给闭包，以将循环值存储在点击处理程序中：

var clickHandler = (function (termIndex, yOffset) {
    return function (e) {

        // OTHER CODE NOT SHOWN

        definitionContainer.y = yOffset;

        // MORE CODE NOT SHOWN

    }
})(c, yOffsetNumberContainer);

【讨论】：