组合两个具有相似属性的 for 循环

Question

我有两个 div，它们用数字表示 window 屏幕的宽度和高度，从每 100 个像素开始计算。数值包裹在 span 标签内，并通过两个循环插入到它们各自的 div 容器中。由于这两个循环共享几乎完全相同的方法和条件逻辑，我想知道是否有一种方法可以以某种方式将它们组合起来：

HTML

<div class="rule rule--horizontal"></div>
<div class="rule rule--vertical"></div>

JS

document.addEventListener("DOMContentLoaded", function() {
  var horizontal = document.getElementsByClassName("rule--horizontal")[0],
      vertical   = document.getElementsByClassName("rule--vertical")[0];

  for (var i = 50, screenWidth = screen.width; i < screenWidth; i+= 50) {
    if (i % 100 === 0) {
      horizontal.innerHTML += "<span class='num num--visible'>" + i + "</span>";
    }
  }

  for (var i = 50, screenHeight = screen.height; i < screenHeight; i+= 50) {
    if (i % 100 === 0) {
      vertical.innerHTML += "<span class='num num--visible'>" + i + "</span>";
    }
  }
});

JSFiddle

Answer 1

您可以创建函数并在两个地方使用它：

document.addEventListener("DOMContentLoaded", function() {
  var horizontal = document.getElementsByClassName("rule--horizontal")[0],
      vertical   = document.getElementsByClassName("rule--vertical")[0];
  loop(horizontal, screen.width);
  loop(vertical, screen.height);

});
function loop(element, max) {
  for (var i = 50; i < max; i+= 50) {
    if (i % 100 === 0) {
      element.innerHTML += "<span class='num num--visible'>" + i + "</span>";
    }
  }
}

Answer 2

这会产生相同的结果

document.addEventListener("DOMContentLoaded", function() {
    var horizontal = document.getElementsByClassName("rule--horizontal")[0],
        vertical   = document.getElementsByClassName("rule--vertical")[0];
    var a = screen.width > screen.height ? screen.width : screen.height;
    for (var i = 50; i < a; i+= 50) {
        if (i % 100 === 0) {
            if(i < screen.width)horizontal.innerHTML += "<span class='num num--visible'>" + i + "</span>";
            if(i < screen.height)vertical.innerHTML += "<span class='num num--visible'>" + i + "</span>";
        }
    }
});

Answer 3

您可以分解出 if 语句 if (i % 100 === 0) this is true on 100, 200, etc. I start in 100 and increment by 100

document.addEventListener("DOMContentLoaded", function() {
   var horizontal = document.getElementsByClassName("rule--horizontal")[0],
       vertical   = document.getElementsByClassName("rule--vertical")[0];

   var createDivs = function (axis, maxSize) {
       for (var i = 100; i < maxSize; i += 100) {
           axis.innerHTML += "<span class='num num--visible'>" + i + "</span>";
       }
   };

   createDivs(horizontal, screen.width);
   createDivs(vertical, screen.height);
});

组合两个具有相似属性的 for 循环

Combining two for-loops that share similar properties

javascript

conditional

dom

loops