使用禁用或启用切片按钮或多或少显示

Question

我有一个jQuery slice函数，可以加载更多或更少的图像。我正在尝试更改此设置，以便在没有更多可用图像或显示6张图像的情况下，隐藏或禁用更多按钮显示。

我可以通过显示更多按钮来使用它。但是，如果我加载页面并且仅显示2张图像，并且没有更多可用，则显示更多按钮仍然存在。

有人可以告诉我我做错了什么，以及如何使它不显示较少显示按钮。

code

 jQuery(document).ready(function ($) {
        const cards = $('.card-deck')
        let clicks = 9;

        if (cards.length > 9) {
            cards.hide();
            cards.slice(0, 9).show();
        }
        $('.show-more').on('click', function () {
            clicks = clicks + 6;
            if (clicks > cards.length) {
                clicks = cards.length
            }
            cards.slice(0, clicks).fadeIn();

            if ($(".card-deck :hidden").length == 0) {
                $(".show-more").hide();
            } else {
                $(".show-more").show();
            }
            e.preventDefault();
        });

        if (cards.length > 9) {
            $('.show-less').on('click', function () {
                clicks = clicks - 6;
                if (clicks < 0) {
                    clicks = 0
                }
                cards.slice(clicks, cards.length).fadeOut();
            });
        }
});
    

我有一个jQuery slice函数，可以加载更多或更少的图像。我试图改变它以隐藏或禁用按钮显示，如果没有更多可用图像，或者如果我们显示了6张图像，则隐藏...

Answer 1

根据您的代码示例，如果没有.card-deck类的元素与：hidden jQuery伪类选择器匹配，则仅隐藏“显示更多”按钮。您只需在每次单击“显示更多”按钮后检查。这是第一个错误。如果您想预先隐藏它，则需要像在这里一样提前检查此条件（在这里，也可以放置“显示更多”和“显示更少”按钮的逻辑的好地方：