将值存储在变量或对象中时的 Javascript 错误计算

Question

我正在尝试使用滑块在我的 HTML 布局中为相关列的宽度设置动画。

在这段代码中，一切都很好，在这里我得到了幻灯片上另一列的新价值。

var item.thisWidth; // current width of edited column
var item.prevCellWidth; // current width of previus/last column

fdd

if(slider.value > item.thisWidth){
     var prevNewWidth = item.prevCellWidth - (slider.value-item.thisWidth);        
     $('#r'+item.thisRowId+'s'+item.prevCellRowOrder+'').css('width', prevNewWidth + '%');
}   

但是在滑动计算之后发生了一些奇怪的事情。创造的价值是成千上万。 需要记住，滑块的最小值/最大值是从 0-100

“滑块值”

if(slider.value < item.thisWidth){

    var prevNewWidth = item.prevCellWidth + (item.thisWidth - slider.value);

    $('#r'+item.thisRowId+'s'+item.prevCellRowOrder+'').css('width', prevNewWidth + '%');
}

我已尝试检查所有传递给计算的值，它们显示正常。

alert('oldWidth'+item.thisWidth+'sliderWidth'+slider.value+'previuscell'+item.prevCellWidth+'');

但是当减小滑块时，我得到了这些错误的结果

e.g. 30 + (40 - 10) = 400000;  ??

更新：

使用@rogelio 的建议解决了这个问题 - 将字符串解析为整数：

var integer = parseInt(string);

谢谢@rogelio！

Answer 1

问题是因为slider.value 是一个字符串。假设您从输入中获取值，则需要将其解析为整数。用 javascript 是微不足道的，例如你的行

var prevNewWidth = item.prevCellWidth + (item.thisWidth - slider.value);

需要改成

var prevNewWidth = item.prevCellWidth + (item.thisWidth - parseInt(slider.value));

Answer 2

我研究我自己，所以对于这样简单的事情，有时我可以在没有人指导我获得正确信息的情况下花费一段时间。

parseInt(值);这是我更新的问题和答案:)

 function handleSliderChange(event, slider){
     $('#r'+item.thisRowId+'s'+item.thisRowOrder).css('width', slider.value + '%');
    
     var sliderValue = parseInt(slider.value);
     var oldValue = item.thisWidth;
     var oldPrevValue = item.prevCellWidth;
     if(sliderValue > oldValue){
        var prevNewWidth = oldPrevValue - (sliderValue-oldValue);        
        $('#r'+item.thisRowId+'s'+item.prevCellRowOrder).css('width', prevNewWidth + '%');
      
        }
      if(slider.value < item.thisWidth){
        var prevNewWidth = oldPrevValue + (oldValue - sliderValue);
         
        $('#r'+item.thisRowId+'s'+item.prevCellRowOrder).css('width', prevNewWidth + '%');}
         if(slider.value === item.thisWidth){
            var prevNewWidth = sliderValue;
           
        $('#r'+item.thisRowId+'s'+item.prevCellRowOrder).css('width', prevNewWidth + '%');
         }  }

所以对于像我这样不在大学或大学的人......总是为值创建变量，如果是数字也添加 parseInt(value) --> 这应该可以让你避免常见错误并节省一些时间:)