Javascript 在Jquery中使用带有百分比的if语句总是返回false

我有一小部分代码可以创建一个无休止的旋转木马。以像素为单位完成时，效果良好：

$('.left').click(function(){
        $('.box').animate({left: '+=100'}, 100, function(){
        var $last = $('.box').last();
        if ($last.css('left') == '100px') {
            $last.prependTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
});

但是如果我从像素变为百分比，它就不起作用了，而且if语句

if
是false

$('.left').click(function(){
        $('.box').animate({left: '+=5%'}, 200, function(){
        var $last = $('.box').last();
        if ($last.css('left') == '5%') {
            $last.prependTo('.container').before('\n\r').hide().fadeIn();
            $('.box').css('left','0%');
        }
    });
});


有人知道这是为什么吗？我使用的是响应性布局，因此需要保留百分比。
根据，
.css（）
返回计算值

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，尺寸的计算样式几乎总是像素，但它们可以在样式表中指定为em、ex、px或%。不同的浏览器可能返回逻辑上但文本上不相等的CSS颜色值，例如#FFF、#ffffff和rgb（255255）

因此，您不能将其与百分比值进行比较。
根据，
.css（）
返回计算值

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，尺寸的计算样式几乎总是像素，但它们可以在样式表中指定为em、ex、px或%。不同的浏览器可能返回逻辑上但文本上不相等的CSS颜色值，例如#FFF、#ffffff和rgb（255255）

因此，您可能无法将其与百分比值进行比较。
这里发生的事情是，即使最初将其设置为百分比，jQuery的
animate（）
方法也会自动将其转换为像素。因此，当您随后调用
css（）
时，您会得到一个像素值。
这里发生的事情是，即使您最初将其设置为百分比，jQuery的
animate（）
方法也会自动将其转换为像素。因此，当您调用
css（）
时，您会得到一个像素值。
如@Nathan p所述。您可能无法比较百分比值，但如果您需要保持css百分比，您可以使用
$（'.box'）.width（）以像素为单位检索框宽，如下所示：

var boxWidth = $('.box').width()
$('.left').click(function(){
    $('.box').animate({left: '+='+boxWidth}, 100, function(){
        var $last = $('.box').last();
        if ($last.css('left') == boxWidth+'px') {
            $last.prependTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
});


注意，所有css维度都以百分比表示

希望它有帮助。
如@Nathan p所述。您可能不会比较百分比值，但如果您需要保留CSS百分比，您可以使用
$（'.box'）.width（）
以像素为单位检索框宽，如下所示：

var boxWidth = $('.box').width()
$('.left').click(function(){
    $('.box').animate({left: '+='+boxWidth}, 100, function(){
        var $last = $('.box').last();
        if ($last.css('left') == boxWidth+'px') {
            $last.prependTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
});


注意，所有css维度都以百分比表示

希望它有帮助
尝试
console.log（$last.css（'left'））
。很可能是像素值，而不是百分比。jQuery可能正在计算确切的值并进行设置。在javascript中获取样式时，返回的通常是像素值，有时甚至是百分比，因此一个好的经验法则是，如果必须使用百分比，请根据父元素等自己进行计算。尝试
console.log（$last.css）（‘左’）
。很可能是像素值而不是百分比。jQuery可能是在计算确切的值并进行设置。在javascript中获取样式时，返回的通常是像素值，有时甚至是以百分比进行设置，因此一个很好的经验法则是，如果必须使用百分比，请自行计算关于父元素等。这似乎很奇怪。我只是选择了内联样式，因为上面说的是
left:17%
。有什么方法可以与该内联样式进行比较吗？可能使用
.style.cssText
？这似乎很奇怪。我只是选择内联样式，因为上面说的是
left:17%
。有什么方法可以与之进行比较吗内联样式？可能使用
.style.cssText
？