Question

我正在尝试制作各种旋转木马。一旦div移动到其容器的最左侧和右侧，我就会被隐藏并显示下一个和珍贵的按钮。

我认为我在计算宽度方面有一切正确但是出于某种原因，当你点击按钮时，元素会保持隐藏状态，而不管条件注释应该指示应该隐藏或显示它们。

这是我到目前为止的链接。单击MoveLeft和MoveRight按钮。 http://www.ehbeat.com/test/

<script type="text/javascript">
    $(document).ready(function () {

        //Check width of Gallery div
        var galleryWidth = $("#Gallery").innerWidth();

        //Check width of GalleryItem
        var galleryItemWidth = $(".GalleryItem").innerWidth();

        //Check distance from left
        var position = $('.GalleryItem').position();
        var galleryItemLeft = position.left;


        $(".MoveRight").click(function () {
            $(".GalleryItem").animate({
                "left": "+=50px"
            }, "slow");
            $(".GalleryItem2").animate({
                "left": "+=100px"
            }, "slow");
        });

        $(".MoveLeft").click(function () {
            $(".GalleryItem").animate({
                "left": "-=50px"
            }, "slow");
            $(".GalleryItem2").animate({
                "left": "-=100px"
            }, "slow");
        });

        $(".Controls").live('click', function () {
            if (galleryItemLeft >= "0") {
                $('.MoveRight').hide();
            }
            else {
                $('.MoveRight').show();
            }
        });

        if (galleryItemWidth == galleryWidth - galleryItemWidth) {
            $('.MoveLeft').hide();
        }


    });
</script>

Answer 1

您似乎在 $（document）.ready（）调用中设置了所有变量。

这意味着，虽然他们正在加载，但每次点击都不会更新。

galleryItemLeft ， galleryItemWidth 和 galleryItemWidth 每次点击都需要更新变量，所以我建议每次点击重新分配值（通过将分配移动到实时函数中）

编辑此外，由于您的最后一个if语句被排除在任何点击功能之外，因此它也需要重新定位到实时点击事件中。

-Chris

Answer 2

Chris是对的，代码看起来应该是这样的：

$(".Controls").live('click', function() {
    position = $('.GalleryItem').position();
    galleryItemLeft = position.left;

    if(galleryItemLeft > "0") { 
        $('.MoveRight').hide();}
    else{
        $('.MoveRight').show();
    }

    if(galleryItemWidth == galleryWidth - galleryItemWidth) {
        $('.MoveLeft').hide();
    }
});

Jquery根据位置显示和隐藏元素

2 个答案: