javascript - 嵌套for循环同时更新3个变量

Question

我环顾四周，但没有找到解决方案。

我想打印出这之间的“插值”点:

.card.ani25 {
bottom: 72%;
left:85%;
}

还有这个:

.card.ani49 {
bottom: 46%;
left: 46%;
}

基本上，我试图同时更新该 CSS 中的所有数值。一次更新一个值是可行的，但在这种情况下没有用。 到目前为止我所尝试过的，嗯，想到的一切，包括触发一些无限循环，但这就是“稳定”:-)

for (var i = 25; i < 50; i++){
 for (var j = 72; j >=46; j-=2){
  for (var k = 85; k >=46; k-=3){
t.innerHTML = '.card.ani' + i + ' {' + '<br>' + 'bottom: ' + j + '%;' + '<br>' + 'left: ' + k + '%;' + '<br>' + '}';
  }
 }
}

这仅打印出最终迭代，如下所示:

http://codepen.io/damianocel/pen/ZLEXOR

如果我在“innerHTML2”后面放一个+=，它就会爆炸，屏幕卡住，就像无限循环一样。

我知道，最外层循环首先运行，然后下一个内部循环多次运行，但我从未见过有 3 个变量的情况。老实说，我也不知道只有两个变量的解决方案。

谢谢，如果之前有人问过这个问题，我们深表歉意。

Answer 1

问题是通过重新分配innerHTML来改变HTML的操作很慢。当您使用 += 时，它每次都会重写 HTML，这就是导致速度变慢的原因。也就是说它仍然有效，更快的方法是使用变量来保存字符串并更新该变量。然后最后将 t.innerHTML 的值分配给该字符串:

var t = document.getElementById('target');
var str = "";
for (var i = 25; i < 50; i++){
 for (var j = 72; j >=46; j-=2){
  for (var k = 85; k >=46; k-=3){
      str += '.card.ani' + i + ' {' + '<br>' + 'bottom: ' + j + '%;' + '<br>' + 'left: ' + k + '%;' + '<br>' + '}';
    }
  }
}

t.innerHTML = str;

<小时/>

编辑

澄清后，您似乎只需要一个循环并每次在该循环中更新变量。在这种情况下，您可以执行以下操作:

var t = document.getElementById('target');
var str = "";
for (var i = 25, j = 72, k = 85; i < 50 && j >=46 && k >=46; i++, j-=2, k-=3){
    str += '.card.ani' + i + ' {' + '<br>' + 'bottom: ' + j + '%;' + '<br>' + 'left: ' + k + '%;' + '<br>' + '}';
}
t.innerHTML = str;

对于 for 循环内的每个部分 for(x;y;z) 您可以使用逗号来创建多个语句。因此，在第一部分中您可以定义 3 个变量，并在最后一部分中更新 3 个变量。只要满足所有这些条件，中间部分就会运行循环，当其中一个条件失败时，它就会停止。

注意:如果您希望只要满足其中一个条件就继续运行，您可以使用 ||(OR)正确。

<强> Code Pen (single loop)

Code Pen