2つのオブジェクトを反復し、対応する位置に1つのオブジェクトを等しく設定します

Question

与えられた計算に基づいて、幅（単なる数値）として使用される数値を出力する一連の値があります。いくつかのボックスを特定の幅（および高さ）にします。ボックスの数は与えられた値の数と同じです。したがって、7つの値がある場合、7つのボックスがあり、これらのボックスは、最初に書き込んだ関数から出力される幅でなければなりません。だから、calculateBoxWidthからの出力値1は、同じのfuctionからの出力値2は、箱2の幅箱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個の幅の集合が与えられているとどのようにして1番目の要素を1番目の要素に設定して2番目の要素にth E第二幅、などそれはあなたが望むなら、私は要素のリストを反復処理をお勧めしたい、とあればフォールバック幅を使用し、何らかの形で、幅のあなたの配列は、異なる長さを持っています

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

あなたはこのような何か行うことができます：あなたはcalculateBoxWidth()

への呼び出しでは上記で定義された同じ values配列を渡しているので

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; 

} 

を