根据 For 循环中的位置修改 X 和 Y 变量答案

【问题标题】：Modifying an X and Y variable, based on position in For Loop根据 For 循环中的位置修改 X 和 Y 变量
【发布时间】：2016-10-17 04:42:02
【问题描述】：

编辑 - 我不认为我第一次解释得很好。

我有很多数据 - 它在一个数组中，数组中的每个项目都是一个对象。在我工作的系统（A/V 设备的控制系统，它使用 JavaScript 作为编程语言）中，我根据数组的长度生成按钮。我希望能够定位一个按钮，并且基本上知道数组中每个按钮的 X 和 Y 坐标 - X 和 Y 是行/列。（然后我将其转换为 UI 上的 X/Y 像素位置。

下面的初始代码位于 for 循环中，我手动计算了按钮位置。但这很乏味，因为我使用相同的功能来展示不同组/大小的按钮。

任何地方都有 mirage.log = console.log。

下面的代码是 For 循环的一部分

button.element.style.position = 'absolute'; //Do to all Buttons.
if (i == 0) //First Item
{
    button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = btn_Info.startTop + 'px';
}
else if (i <= btn_Info.numRow-1) //First Column.
{
    mirage.log('Setting Position of First Column');
    button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * i + btn_Info.startTop + 'px';   
} 
else if (i > btn_Info.numRow - 1 && i <= btn_Info.numRow * 2 - 1)
{
    mirage.log('Setting Second column ' + i);
    button.element.style.left = btn_Info.startLeft + btn_Info.width + btn_Info.hOffset + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i-btn_Info.numRow) + btn_Info.startTop + 'px';   
}
else
{
    mirage.log('Setting Third column ' + i);
    button.element.style.left = btn_Info.startLeft + ((btn_Info.width + btn_Info.hOffset)*2) + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i - (btn_Info.numRow*2)) + btn_Info.startTop + 'px';   
}

提前感谢您的帮助 - 去年我从这个论坛获得了很多答案，你们太棒了！

编辑 -

如果我先生成行然后生成列，我能够得到一些调整：

在朋友的帮助下，我能够稍微接近一点，并且能够通过执行以下操作来调整 2 列布局：

编码器 = { 'buttonVals':{'width':125,'height':50,'numCols':2,'numRows':null;'vOffset':10,'hOffset':10}

var posLeft; var posTop;

posLeft = (i % encoder.buttonVals.numCols) * (encoder.buttonVals.width + encoder.buttonVals.hOffset) + encoder.buttonVals.startLeft;
posTop = Math.floor(i / encoder.buttonVals.numCols) * (encoder.buttonVals.height + encoder.buttonVals.vOffset) + encoder.buttonVals.startTop;

【问题讨论】：

听起来你应该使用 CSS nth-child
你也能分享一下标记吗

标签： javascript for-loop

【解决方案1】：

经过一段时间的研究 - 这是我开始工作的代码。这将打印出行位置和列位置。

testFunction = function(incRow, incCol){
	  
	  var myFunc = {
	    'testLength':0,
	    'numRows':incRow,
	    'numCols':incCol,
	    'array':[],
	  };
	  myFunc.testLength = incRow * incCol;
	  
	  for(var c=0, posCol = 0, posRow = 0; c < myFunc.testLength; c++)
	  {
         var whichRow;        
         posRow = Math.floor(c/myFunc.numRows);
         whichRow = Math.floor(c/myFunc.numRows) + c;
         if (whichRow > myFunc.numRows)
         {
             whichRow = whichRow - (myFunc.numRows * posRow) - posRow;
             if (whichRow === 0)
             {
                 posCol = posCol + 1;
             }
         }
         console.log(c + ' : ' + whichRow + ' : ' + posCol);      
	  }
};


testFunction(6,4);

【讨论】：