Question

我有一个react应用，该应用具有一个滑块，可通过2个输入 x 和 y 在0％和100％之间移动图标。但是，当 y 输入小于 x 时，它会通过范围滑块拍摄图标向左 样式属性。

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

例如， x = 5 和 y = 10 ，因此图标将位于50％的一半位置

但如果 x = 5且y = 4 ，则left属性将为125％，图标会射击并且不会通过滑块，但会保持在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)
    }
}

反应：如果是其他逻辑，则大于100

1 个答案: