迭代兩個對象，並設置一個等於另一個在它的相應位置

Question

我有一組值，基於給定的計算，輸出一個數字，它應該被用作寬度（只是一個數字）使一些盒子具有一定的寬度（和高度）。盒子的數量與給定值的數量相同。因此，如果有七個值，則會有七個框，並且這些框必須是從我寫的第一個函數輸出的寬度。

所以從calculateBoxWidth產值1箱1，從同機能的研究產值兩者的寬度是2盒的寬度等

我不知道什麼是一個簡單而乾淨的方式代碼這個。我認爲實質上我只是想遍歷兩個對象，並在其相應的位置設置一個等於另一個。

這是我到目前爲止的代碼：

var values = [0, 2, 4, 8, 10, 12, 14]; 

/* 
* Calculate the width 
*/ 
function calculateBoxWidth(valuesArray) { 
    var boxWidths = new Array(); 
    var maxNumber = Math.max.apply(null, valuesArray); 

    for (var i = 0; i < valuesArray.length; i++) { 
     var value = values[i]; 
     var calculatedWidth = ((value/maxNumber) * 70) + 30; 
     boxWidths.push(Math.round(calculatedWidth)); 
    } 

    return boxWidths; 

} 

/* 
* Set the width (and height) 
*/ 
function setBoxDimensions() { 
    var theBox = document.getElementsByClassName('the-box'); 
    var theWidths = calculateBoxWidth(values); 

    for (var i = 0; i < theBox.length; i++) { 

     // ?? 
    } 

    for (var j = 0; j < theWidths.length; j++) { 
     // ?? 
    } 

} 

Answer 1

我想你問，如果給定一個n個html元素和n個寬度的集合，你如何設置第一個元素使第一個元素具有第二個元素Ë第二寬度等，如果這就是你想要什麼，我建議在迭代的元素列表，並使用備用寬度如果，不知何故，你的寬度陣列具有不同的長度：

function setBoxDimensions() { 
    var theBox = document.getElementsByClassName('the-box'); 
    var theWidths = calculateBoxWidth(values); 

    for (var i = 0; i < theBox.length; i++) { 
     // use a fallback of 0 if theWidths[i] is undefined 
     var widthStyle = '' + (theWidths[i] || 0) + 'px'; 
     theBox.item(i).style.width = widthStyle; 
    } 
} 

如果您您for循環內

theBox.item(i).style.height = widthStyle; 

：要設置的高度相同的值，再加入英寸

Answer 2

你可以做這樣的事情：

function calculateBoxWidth(valuesArray) { 
    var boxWidths = []; 
    var maxNumber = Math.max.apply(null, valuesArray); 

    for (var i = 0; i < valuesArray.length; i++) { 
     var calculatedWidth = ((valuesArray[i]/maxNumber) * 70) + 30; 
     boxWidths.push(Math.round(calculatedWidth)); 
    } 

    return boxWidths; 

} 

既然你通過上面的通話定義相同values陣列中calculateBoxWidth()