JavaScript

Question

我正在尝试编写一个构造函数，其方法是循环遍历多行（数字参数），然后针对每一行循环遍历多个点（数字参数）。在这两个循环中的每个循环中， html 的一部分将被渲染。我可以让第一部分 html 进行渲染，但是当我尝试使用先前渲染的 html 中的选择器遍历第二部分时，没有任何反应。我错过了什么？

HTML 代码

<div class="container">
   <h1 class="heading">Random Colors</h1>
   <div class="row">
       <div id="frame" class="col-xs-12">
           <!-- CONTENT PUSHED BY JAVASCRIPT -->     
       </div>  
   </div><!-- Ends .row -->  
</div><!-- Ends .container -->

JAVASCRIPT 代码

var ColorDots = function(rows, dots) {
    this.numOfRows = rows;
    this.numOfDots = dots;
    this.renderDots();

};

ColorDots.prototype.renderDots = function() { 

    this.rowTemplate = '<div class="color-dot row"></div>';
    this.iconTemplate = '<i class="fa fa-circle icon" aria-hidden="true"></i>';     

    for ( var r = 0; r < this.numOfRows; r++) {

        document.getElementById('frame').innerHTML += this.rowTemplate;

        for ( var i = 0; i < this.numOfDots; i++) {

            document.getElementsByClassName('color-dot').innerHTML += this.iconTemplate;
        }            
    }    
};

解决方案（仅限javascript）

    var ColorDots = function(rows, dots) {

        // Properties
        this.numOfDots = dots;
        this.numOfRows = rows || 1;
        this.iconHtml = '<i class="fa fa-circle icon" aria-hidden="true"></i>';

        this.renderRows();

    };    

    ColorDots.prototype.renderRows = function() { 

        this.rowHtml = ''; 

        for ( var r = 0; r < this.numOfRows; r++) {

             this.rowHtml += '<div class="color-dot row">';

            for ( var i = 0; i < this.numOfDots; i++) {            
                 this.rowHtml += this.iconHtml;
            }  

            this.rowHtml    += '</div>';
        }

        document.getElementById('frame').innerHTML = this.rowHtml;

};

谢谢@rainerh 回答我的问题。在考虑了@shilly 在评论中关于在 for 循环中使用 .innerHTML 的内容后，我如何对我的代码进行了一些更改以反映他的建议。希望这对其他尝试做类似我的事情的人有用。

Answer 1

首先，css class 是色点，而不是选择器中的色点。

其次getElementsByCLassName returns 一个数组。所以不得不在这里使用索引。

ColorDots.prototype.renderDots = function() { 
  this.rowTemplate = '<div class="color-dot row"></div>';
  this.iconTemplate = '<i class="fa fa-circle icon" aria-hidden="true"></i>';     

  for ( var r = 0; r < this.numOfRows; r++) {

    document.getElementById('frame').innerHTML += this.rowTemplate;
    for ( var i = 0; i < this.numOfDots; i++) {
      document.getElementsByClassName('color-dots')[r].innerHTML += this.iconTemplate;
    }            
  }    
};

JavaScript - 迭代动态创建 html

JavaScript - Iterate over dynamically create html

constructor

loops

prototype

selector