javascript - react : If Else logic, 大于 100

Question

我有一个 React 应用程序，它有一个 slider ，可以通过 2 个输入 x 和 y 在 0% 和 100% 之间移动图标。但是当 y 输入小于 x 时，它会发射图标 LEFT style property 通过范围 slider 。

我想创建逻辑，以便如果图标 LEFT 超过 100，它保持在 100

例如，x = 5 和 y = 10 所以图标会在 50% 的中间位置

但如果 x = 5 和 y = 4，则左侧属性为 125%，图标会发射并且不会通过 slider ，但会保持在 100%。

我的问题是，当我运行 for 循环 时，它会将所有甚至小于 100% 移动到 100%

所以如果图标是 10%，在脚本之后它的值是 100%

for(var i =0; i<= arrayOfIcons.length; i++) {
    if(arrayOfIcons[i].style.left <= '100%') {
        console.log(arrayOfIcons[i].style.left)
    } else {
        arrayOfIcons[i].style.left = '100%'
        console.log('greater than 100% : ' + arrayOfIcons[i].style.left)
    }
}

TL:DR 如果 的值大于 100%，我希望它保持在 100%

Answer 1

您需要从带有百分号的字符串中提取数值。

function extractNumberFromPercentString(s) {
    return +s.slice(0, -1);
}

for(var i =0; i<= arrayOfIcons.length; i++) {
    if(extractNumberFromPercentString(arrayOfIcons[i].style.left) <= 100) {
        console.log(arrayOfIcons[i].style.left)
    } else {
        arrayOfIcons[i].style.left = '100%'
        console.log('greater than 100% : ' + arrayOfIcons[i].style.left)
    }
}