javascript - 在 JavaScript 函数中使用循环

Question

晚上好。所以，你们能给我一些例子，说明我如何使用循环来使这个函数更小，我不熟悉 JS 中的循环。谢谢 ：）

function setValue(){

                let in1 = document.querySelector("#number1")
                let in2 = document.querySelector("#number2")
                let in3 = document.querySelector("#number3")
                let in4 = document.querySelector("#number4")
                let in5 = document.querySelector("#number5")
                let in6 = document.querySelector("#number6")
                let in7 = document.querySelector("#number7")
                let in8 = document.querySelector("#number8")
                let in9 = document.querySelector("#number9")
                let in10 = document.querySelector("#number10")

                setAttribute('marginLeft', in1.value)
                setAttribute('marginRight', in2.value)
                setAttribute('marginBottom', in3.value)
                setAttribute('marginTop', in4.value)
                setAttribute('margin', in5.value)
                setAttribute('paddingLeft', in6.value)
                setAttribute('paddingRight', in7.value)
                setAttribute('paddingBottom', in8.value)
                setAttribute('paddingTop', in9.value)
                setAttribute('padding', in10.value)
            }

标签： javascriptfunctionloops

Answer 1

使用类而不是 ID，并具有需要设置的属性数组：

function setValue() {
  const attributeNames = ['marginLeft', 'marginRight', 'marginBottom', ...];
  document.querySelectorAll('.numbers').forEach((elm, i) => {
    setAttribute(attributeNames[i], elm.value);
  });
}

如果你不能依赖NodeList.forEach现有的（它不是那么旧，所以旧浏览器不支持），首先填充它：

if (!NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

（或将其更改为for循环，或.call Array.prototype.forEach）