jquery if/else check css marginLeft 给出了奇怪的结果答案

【问题标题】：jquery if/else check css marginLeft gives weird resultsjquery if/else check css marginLeft 给出了奇怪的结果
【发布时间】：2015-04-04 08:00:33
【问题描述】：

我正在研究一个水平幻灯片功能，这给了我奇怪的结果。

html:

<div class="packageSliderContainer borderTop">
            <div class="slideContainer slide1"></div>
            <div class="slideContainer slide2"></div>
            <div class="slideContainer slide3"></div>
            <div class="slideContainer slide4"></div>
            <div class="slideContainer slide5"></div>
            <div class="slideContainer slide6"></div>

            <div id="slideArrowLeft"></div>
            <div id="slideArrowRight"></div>
        </div>

CSS：

.packageSliderContainer {
width: 100%;
height: 982px;
overflow: hidden;
position: relative;
}

.slideContainer {
position: absolute;
width: 100%;
margin-left: 0px;
height: 100%;
}
.slide1 {   background: #fe0000;    left: 0%;}
.slide2 {   background: #00fe00;    left: 100%;}
.slide3 {   background: #0000fe;    left: 200%;}
.slide4 {   background: #aaa000;    left: 300%;}
.slide5 {   background: #fff000;    left: 400%;}
.slide6 {   background: #bebebe;    left: 500%;}

#slideArrowRight {
width: 37px;
height: 73px;
background: url(../images/arrow.png);
position: absolute;
right: 80px;
top: 50%;
cursor: pointer;
margin-top: -36px;
}

#slideArrowLeft {
width: 37px;
height: 73px;
background: url(../images/arrow.png);
position: absolute;
left: 80px;
top: 50%;
cursor: pointer;
margin-top: -36px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

和 jquery：

$('#slideArrowLeft').click(function(){
        var allSlides = $(this).siblings('.slideContainer');
        var slideWidth = allSlides.width();

        if ($(allSlides).css('marginLeft') <= "1px") {
            $(allSlides).animate({marginLeft: "+=" + (slideWidth) + "px"});
        }

        else {
            console.log("don't do stuffs");
        };
    });

我怀疑你不能在第一张幻灯片上向左滑动，因为左边距为 0，但由于某种原因，你可以向左滑动一次。然后 if 选择器工作正常，但我完全不明白为什么。

这里有人可以就这个案子给我启发吗？（你们可能已经注意到，对于 javascript 和 jquery 来说都是新的：D）

【问题讨论】：

$(allSlides).css('marginLeft') <= "1px": 1px 是一个字符串，那是你的错误
stackoverflow.com/questions/590602/…
.css() 方法只返回纯数字（像素）。
$(allSlides).css('marginLeft') <= "1px" 你应该比较整数，而不是字符串
@f_martinez 它以字符串形式返回计算值

标签： jquery if-statement

【解决方案1】：

你不能比较类似于<= "1px"的值，因为它里面有字符串，你需要和数字比较。

替换这个：

if ($(allSlides).css('marginLeft') <= "1px") {

有了这个：

if (parseFloat($(allSlides).css('marginLeft')) <= 1) {

或者通过替换px：

if ($(allSlides).css('marginLeft').replace("px", "") <= 1) {

【讨论】：

【解决方案2】：

试试这个兄弟..

$('#slideArrowLeft').click(function(){
        var allSlides = $(this).siblings('.slideContainer');
        var slideWidth = allSlides.width();

        if ($(allSlides).css('margin-left') <= "1") {
            $(allSlides).animate({marginLeft: "+=" + (slideWidth) + "px"});
        }

        else {
            $(allSlides).animate({marginLeft: 0});
        };
    });

DEMO

【讨论】：