Question

我正在尝试创建我的第一个jQuery帖子滑块。

滑块有前一个和下一个按钮，它们偏移包含所有帖子项目的div的顶部位置。即。通过＆＃39; .post-item＆＃39;增加或减少最高位置值。高度。

我在使用条件语句时遇到困难，根据div的CSS top属性的值禁用上一个和下一个按钮。例如，如果顶部位置＆lt; = 0

，则禁用上一个按钮

我是编程新手，我希望通过其他人了解与我的情况有关的例子，以便更好地掌握这些概念。任何有关如何最好地实现这一目标的帮助和指导对我来说都是一个巨大的帮助。在帖子的底部，我在其中一次尝试中包含了相当尴尬的进展。

JavaScript源

(function ($) {
    $(document).ready(function () {

        $('.prev-btn').click(function () {
                $(".posts-body").animate({
                    top: "+=142"
                }, {"duration": 400, "easing": "easeOutBack"});

        });

        $('.next-btn').click(function () {
            $(".posts-body").animate({
                top: "-=142"
            }, {"duration": 400, "easing": "easeOutBack"});
        });
    });
})(jQuery);

HTML标记

<div class="buttons">
    <span class="prev-btn ">Up</span>
    <span class="next-btn ">Down</span>
</div>
<div class="post-slider">
    <div class="posts-body">
        <div class="post-item">
            <h1>Placeholder Text</h1>
        </div>
        <div class="post-item">
            <h1>Placeholder Text</h1>
        </div>
        <div class="post-item">
            <h1>Placeholder Text</h1>
        </div>
        <div class="post-item">
            <h1>Placeholder Text</h1>
        </div>
    </div>
</div>

尝试失败

(function ($) {
        $(document).ready(function () {
            $('.prev-btn').click(function () {
                var selector = document.querySelector(".posts-body");
                var offset = selector.offsetTop;

                if (selector.css("top") > 0) {
                    $(".posts-body").animate({
                        top: "+=142"
                    }, {"duration": 400, "easing": "easeOutBack"});
                }
                console.log(offset);

            });

            $('.next-btn').click(function () {

                var selector = document.querySelector(".posts-body");
                var offset = selector.offsetTop;

                $(".posts-body").animate({
                    top: "-=142"
                }, {"duration": 400, "easing": "easeOutBack"});

                console.log(offset);
            });
        });
    })(jQuery);

非常感谢你的时间和帮助。

Answer 1

我已经设法找到了解决方案，我确信下面发布的示例充满了糟糕的编程技巧（每天都在学习新东西），但是我原来的问题是在单击按钮检查div位置时使用if语句已经解决了。

注意： jQuery css（）方法返回一个字符串，该字符串与前一个示例中的整数进行比较。

JavaScript源代码（已解决）

(function ($) {
    $(document).ready(function () {

        $('.up-btn').click(function () {

            var a = parseInt($(".posts-body").css("top"));

            if (a === 0) {
                $(".posts-body").css("top", "0");
            } else {
                $(".posts-body").animate({
                    top: "+=142"
                }, {"duration": 400, "easing": "easeOutBack"});
            }
        });

        $('.down-btn').click(function () {

            var a = parseInt($(".posts-body").css("top"));
            var b = Math.abs(a);
            var c = parseInt($(".posts-body").css("height"));
            var d = c - (3 * 142);

            if (b >= d) {
                $(".posts-body").css("top", "d");

            } else {
                $(".posts-body").animate({
                    top: "-=142"
                }, {"duration": 400, "easing": "easeOutBack"});
            }
        });
    });
})(jQuery);

来源

CSS-Tricks Link: Check div position with jQuery if/else

jquery基于选择器顶部位置单击条件语句

1 个答案: