简单加法 (x += 50) vs 循环得到结果

Question

我是 jQuery 的新手，但这可能只是我认为的一个非常基本的代码问题 -- 令人尴尬的是我无法弄明白 -- 通过一个愚蠢的解决方法让它工作，但真的很想知道我错过了什么？？

我成功地从动态生成的文本中获取了一个值。值以百分比表示，所以我要切掉 % 符号。我正在尝试为屏幕上的条设置动画以显示 %，但需要在其上添加一些大小 (50px) 以填充 div。下面的代码正是我所需要的……但为什么我不能只 'x += 50' 甚至 'x = x + 50'？其中任何一个都会使栏一直穿过屏幕。我尝试添加 'px'，因为我猜我不知道单位...但没有快乐。

$(document).ready(function() {
 $('.animate').each(function(){
    var x = $(this).text().slice(0,-1);
    for (a = 0; a < 50; a ++)  // Stewpid
        x ++;
    var posInfo = {'width': x};
    $(this).animate(posInfo, 1100);
 });
});

谁能踢我的脑袋看看我搞砸了什么？

Answer 1

$(function(){
    $('.animate').each(function(){
        var x = parseInt($(this).text());
        x += 50;
        var posInfo = {'width': x};
        $(this).animate(posInfo, 1100);
    });
});

问题是 $(this).text() 是一个字符串，即使您删除了 % 符号。

现在，在 JS 中，+ 既是加法运算符又是字符串连接，因此结果将是一个字符串，而不是一个整数。

相反，++ 运算符仅适用于整数，因此它会在执行算术运算之前将您的字符串转换为 int。

只需使用parseInt，它会为你去除%，并将结果转换为int

简单加法 (x += 50) vs 循环得到结果

Simple Addition (x += 50) vs loop to get result

jquery

jquery-animate