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

时间:2016-06-16 13:23:08

标签: javascript html css

我有一个完整的代码,用于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>

2 个答案:

答案 0 :(得分:0)

让我们分解,首先制作一个能为你生成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的元素。

答案 1 :(得分:0)

尝试以下

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');
    }
}