Question

我有一个完整的代码，用于5x5盒子的div。但是，我想使用2 for循环来实现它，而不是写25个div。我尝试了几件事情，但无法解决这个问题，因为我需要为每个人提供唯一的ID（正如您在代码中看到的那样）。每个类似的不同随机类名（box1，box2，box3，box4，box5）我有5个不同的类，因为我有不同的动画顺序。需要帮助解决此问题。我检查了几乎每个主题。

编辑，我应该有2个for循环，一个用于第一行。下面的代码是我的尝试。

for(var i=0; i<5; i++)
{
    for(var j=0; j<5; j++) 
    {   

        document.write('<div class="box2" id=1>'
                        +'<script> randomColorGenerator();'
                        + '</'+ 'script> </div>');

    }

}

    <div class="box" id="1" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="2" > 
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="3" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="4" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="5" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box2" id="6"> 
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box" id="7"> 
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="8" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="9">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="10">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box5" id="11">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="12" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="13">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="14" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box" id="15" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box" id="16">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="17" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box3" id="18" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="19" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="20" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

    <div class="box3" id="21">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box4" id="22" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box" id="23">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box2" id="24" >
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="box5" id="25">
    <script>
    randomColorGenerator();
    </script>
    </div>
    <div class="clear"></div>

Answer 1

让我们分解，首先制作一个能为你生成div的函数。

function createDiv(index) {
  var animationClass = Math.floor(Math.random() * 5) + 1;
  var div = document.createElement('DIV');
  div.class = 'box' + animationClass;
  div.id = index;
  return div;
}

接下来循环多次，并将div添加到容器元素。

var container = document.getElementById('container');

for (var i=0; i <= 25; i++){
  container.appendChild(createDiv(i));
}

请注意，要使其生效，您需要拥有id container的元素。

Answer 2

尝试以下

for(var i = 1; i <= 25; i++) {
    var id = i % 5;
    var cssClass = 'box' + id;
    var divID = 'div'+i;
    console.log(i + ' id='+id+', divId=' + divID + ', cssClass=' + cssClass);
    if(id == 0) {
       console.log('INSERT CLEAR DIV HERE');
    }
}

将创建div更改为循环，每个都具有唯一ID

2 个答案: