javascript - 迭代两个对象并在其相应位置将一个对象设置为等于另一个对象

Question

我有一组值，根据给定的计算，输出一个数字，该数字应该用作宽度(只是一个数字)，以使某些框具有一定的宽度(和高度)。框的数量与给定值的数量相同。因此，如果有七个值，就会有七个框，这些框必须是我编写的第一个函数输出的宽度。

因此，calculateBoxWidth 的输出值 1 是框 1 的宽度，同一函数的输出值 2 是框 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;
    }
}

如果您也想将高度设置为相同的值，则添加:

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

在 for 循环内。