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

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

HTML

JS

---

您可以创建函数并在两个位置使用它：

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>";
    }
  }
}

---

您可以创建函数并在两个位置使用它：

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>";
    }
  }
}

---

这会产生同样的结果

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

---

这会产生同样的结果

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

---

如果i%100==0，您可以计算出if语句，这在100、200等上是真的。只需从i开始，在100处递增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);
});

---

如果i%100==0，您可以计算出if语句，这在100、200等上是真的。只需从i开始，在100处递增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);
});

---

@ScottHunter你不需要两个索引变量。@ScottHunter你不需要两个索引变量。@ScottHunter我认为是你否决了答案。这不是一个特别的问题，但你现在觉得它错了吗？似乎他在发帖30秒后没有机会修改他的答案。@jcubic假设说，这不是还会循环两次吗？@CarlEdwards：不仅假设：但它只写了一次；从最初的问题中不清楚这是否可以接受。@ScottHunter你不需要两个索引变量。@ScottHunter你不需要两个索引变量。@ScottHunter我认为你是对答案投反对票的人。这不是一个特别的问题，但你现在觉得它错了吗？似乎他在发帖30秒后没有机会修改他的答案。@jcubic假设说，这不是还会循环两次吗？@CarlEdwards：不仅假设：但它只写了一次；从最初的问题来看，不清楚这是否可以接受。