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圈内。

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()数组

迭代两个对象并将一个对象设置为相应的位置

2 个答案: