如果margin-left = 0px，如何更改margin-left-increase函數以使其禁用？

Question

這是我到目前為止的代碼。 該代碼實際上運行良好，因此希望有人可以幫助我進行一些細微調整？

因此我在UL上的寬度為2000px，其中隱藏了溢出。 用戶可以在縮略圖列表中滾動選擇，以顯示在上方的div中。

不過，我還是希望出於好奇心能做到這一點

HTML：

<img class="thumbSliderLeft" src="Images/left.png" />
<div class="thumbContainer">


<ul class="galleryThumbs">
<li class="gallery"><img class="thumb" src="Images/thumbs/sam.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/cat.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/horse.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/mags.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/tree.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/soup.jpg" /></li>

</ul>



</div>

的CSS

div.thumbContainer {
            width: 800px;
            height: 270px;
            position: relative;
            top: -50px;
            overflow: hidden;
            margin: 0 auto;
}

ul.galleryThumbs {
    width: 2000px;
}

ul.galleryThumbs li.gallery {
    margin-right: 10px;
    padding-top: 3px;
    display: inline-block;
    float: left;
    width: 200px;
    border-style: solid;
    border-radius: 10px;
    border-width: 5px;}

Javascript / jQuery

$(function () {

    var marginLeft = $("ul.galleryThumbs").css("margin-left");

    var indentLeft = $("img.thumbSliderLeft").click(function () {
        $("ul.galleryThumbs").animate({
            "margin-left": "+=250px"
        }, 500, 'linear');

        if (marginLeft === 0) {
            indentLeft.off()
        };

    });
});

Answer 1

如果正確解釋問題，請嘗試使用.off(event) ; 請注意， .animate()會將margin-left設置為以"px"而不是Number 0結尾的String 。

不明確的問題是什么0預期表示marginLeft === 0 ？

$(function () {

        var marginLeft = $("ul.galleryThumbs").css("margin-left");

        $("img.thumbSliderLeft").on("click", function () {
            $("ul.galleryThumbs").animate({
                "margin-left": "+=250px"
            }, 500, 'linear');

            if (marginLeft === 0) { 
                $(this).off("click")
            };

        });
    });

Answer 2

它不接受=== 0的原因是您正在將字符串與int進行比較。

不僅如此，當您使用jquery獲取CSS時，您會在該值之后得到一個px 。 您可以通過添加以下內容來解決此問題：

if (parseInt(marginLeft.replace('px','')) === 0){
 //code here
}

Answer 3

將左邊距的檢查移到處理程序的頂部，並在css（）返回的字符串的開頭檢查是否為0：

    if ($("ul.galleryThumbs").css("margin-left")[0] === '0') {
        indentLeft.off()
    }
    $("ul.galleryThumbs").animate({
        "margin-left": "+=250px"
    }, 500, 'linear');