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

Question

我有一个加载更多或更少图像的 jQuery 切片函数。如果没有更多图像可用或者如果我们有 6 张图像显示隐藏显示更少按钮，我正在尝试更改它以隐藏或禁用按钮显示更多。

我可以使用显示更多按钮来实现此功能。但是，如果我加载页面并且只显示 2 张图像并且不再可用，则显示更多按钮仍然存在。

谁能告诉我我做错了什么以及如何让它与显示更少按钮一起工作。

代码

 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();
            });
        }
});

Answer 1

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

 if (cards.length > 9) {
            cards.hide();
            cards.slice(0, 9).show();
        }

这里有两件重要的事情：

1. 在开始时设置正确的按钮状态。
2. 注意，单击“显示更多”和“显示更少”会影响另一个状态。

您可以将切换按钮的状态包装在单独的函数中。在加载 DOM 时调用一次，然后每次用户单击这些按钮中的任何一个时调用它。
仔细检查toggleButtons 函数。

jQuery(document).ready(function($) {
    cardDeck('blue');
    cardDeck('red');
    cardDeck('green');
});

function cardDeck(id) {
    const cards = $(`#${id} .card-deck`)
    const showMoreButton = $(`#${id} .show-more`);
    const showLessButton = $(`#${id} .show-less`);
    const visibleCardsThresholdMin = 6;
    const step = 6;
    let numberOfVisibleCards = Math.min(cards.length, 9);

    cards.hide();
    cards.slice(0, numberOfVisibleCards).show();

    const toggleButtons = () => {
        if (numberOfVisibleCards == cards.length) {
            showMoreButton.hide();
        } else {
            showMoreButton.show();
        }

        if (numberOfVisibleCards <= visibleCardsThresholdMin) {
            showLessButton.hide();
        } else {
            showLessButton.show();
        }
    }

    toggleButtons();

    showMoreButton.on('click', function(e) {
        e.preventDefault();
        numberOfVisibleCards += step;
        if (numberOfVisibleCards > cards.length) {
            numberOfVisibleCards = cards.length
        }
        cards.slice(0, numberOfVisibleCards).fadeIn();
        toggleButtons();

    });

    showLessButton.on('click', function(e) {
        e.preventDefault();
        numberOfVisibleCards -= step;
        if (numberOfVisibleCards < visibleCardsThresholdMin) {
            numberOfVisibleCards = visibleCardsThresholdMin;
        }
        cards.slice(numberOfVisibleCards, cards.length).fadeOut();
        toggleButtons();

    });
}

.container {
  width: 100%;
  min-height: 30px;
  margin-bottom: 10px;
}

.card-deck {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  float: left;
  margin-right: 2px;
  margin-bottom: 2px;
}

#blue .card-deck {
  background-color: #63ace5;
}

#red .card-deck {
  background-color: #fe4a49;
}

#green .card-deck {
  background-color: #7bc043;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="container" id="blue">
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <button class="show-more">Show more</button>
  <button class="show-less">Show less</button>
</div>

<div class ="container" id="red">
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <button class="show-more">Show more</button>
  <button class="show-less">Show less</button>
</div>

<div class ="container" id="green">
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <div class="card-deck"></div>
  <button class="show-more">Show more</button>
  <button class="show-less">Show less</button>
</div>