Javascript：基于负值的元素宽度 - 从小到大答案

【问题标题】：Javascript: Element Width Based On Negative Values - From Lesser to LargerJavascript：基于负值的元素宽度 - 从小到大
【发布时间】：2022-01-14 04:29:27
【问题描述】：

我有一个数组：

let arrVals = [{img:'imgOne.jpg', num:-99},
     {img:'imgOne.jpg', num:-500}, 
     {img:'imgTwo.jpg', num:-20}, 
     {img:'imgThree.jpg', num:-33},
     {img:'imgFour.jpg', num:-44}
]

现在我循环遍历它并以编程方式从里面的对象数组生成图像：

<div id="imgContainer">

</div>

for (let i = 0; i < arrVals.length; i++) {
 var img = document.createElement('img');
 img.src = arrVals[i].img;
 img.style.width = `${arrVals[i].num}px`;
 // appendChild to imgContainer
}

我正在使用 objects 属性 arrVals[i].num 的负值，但我不能只将它们转换为正数并将它们用作宽度值。我正在尝试获得最大正数对应于 - 比如说 - (-30) 和最小 - 比如说 - 对应于 (-55) 的正数

我需要使用这些值在它们对应的元素上应用样式宽度。我不能只将这些值转换为正数并将它们用作宽度最小的值（在本例中为-500），宽度最大。上面的数组应该对应这个结果：

基于数组值的CSS宽度从小到大：

> -500 should corresponds to the smallest width
> -99 width is larger than the width given to -500
> -44 width is larger than the width given to -99
> -33 width is larger than the width given to -44
> -20 should have the largest width given its value in the array

任何关于如何实现这一目标的见解将不胜感激！

【问题讨论】：

我不清楚这些最终应该转换为什么宽度的信息。我在这里也没有看到代码尝试。
两个数组，一个是按降序排列的宽度，一个是负值。按升序对 Array#2 进行排序并使用索引来查找宽度。尝试会更清楚您正在尝试做什么
@ggorlen CSS 宽度。我从一组对象中获取这些值。我遍历它并获取 img.style.width 的值，如 img.style.width = ${obj[i].nukber}px;我希望这更有意义
对，但它们应该具有什么值？ “最小宽度”究竟意味着什么？ IE。 42、520、0？（对于输出数组中的所有数字）。每个obj[i].nukber 应该是什么？
@ggorlen 我用更多细节更新了我的问题。我希望这有助于更好地解释它。

标签： javascript css

【解决方案1】：

    let arrVals = [{ img: 'imgOne.jpg', num: -99 },
    { img: 'imgOne.jpg', num: -500 },
    { img: 'imgTwo.jpg', num: -20 },
    { img: 'imgThree.jpg', num: -33 },
    { img: 'imgFour.jpg', num: -44 }
    ];

    for (let i = 0; i < arrVals.length; i++) {
        var img = document.createElement('img');
        document.getElementById('imgContainer').appendChild(img);  
        img.src = arrVals[i].img;
        img.style.width = `${Math.abs(arrVals[i].num)}px`;
    }

&lt;div id="imgContainer"&gt;&lt;/div&gt;

enter image description here

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。