我有一个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();
});
}
});
根据您的代码示例，只有当没有。Card-Deck类的元素时，才隐藏“Show more”按钮，该元素匹配:hidded jQuery伪类选择器。 而且只有在每次点击“显示更多”按钮后才会检查。 这是第一个错误。
如果您要预先隐藏它，您需要更早地检查此条件，就像您在这里所做的那样（这里也是放置“显示更多”和“显示更少”按钮逻辑的好地方:
if (cards.length > 9) {
cards.hide();
cards.slice(0, 9).show();
}
这里有两件重要的事情:
您可以将切换按钮的状态包装在单独的函数中。 在DOM加载时调用一次，然后在用户每次单击这些按钮时调用一次。
仔细检查ToggleButtons功能。
null
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>