使用切片按钮显示或多或少的禁用或启用-解网

问：

我有一个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();
            });
        }
});

JavaScript jQuery 切片

答：

1赞 matvs 6/12/2020 #1

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

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

这里有两件重要的事情：

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

您可以将切换按钮的状态包装在单独的函数中。在加载 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>

上一个：显示和添加有限数量的 div - 图库 / Jquery

下一个：删除 jQuery 中的切片增量

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

Show more or less with slice buttons disable or enable

评论