删除 jQuery 中的切片增量

Question

我有一个列表，每个列表元素都有 class .card-deck 我使用 jQuery 函数切片只显示列表中的 6 个，直到用户单击按钮加载更多<button class="show-more w-100">Load more</button> 这行得通，每次点击都会增加 3 个，这就是我想要的，所以行得通。

我还需要一个递减 3 的按钮，我曾尝试简单地将我的 +3 更改为 -3，但这不起作用。

有没有办法修改我的代码以使其正常工作？另外出于某种原因，我需要点击按钮两次才能让它在第一次点击时起作用。有没有办法让它在第一次点击时起作用？

我的代码

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

$('.show-less').on('click', function() {
    clicks = clicks-3;
    $('.card-deck').slice(0,clicks).fadeIn();
});

Answer 1

您需要隐藏显示的那些。

const cards = $('.card-deck')
let clicks = 3;
let stepSize = 3

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="card-deck">1</li>
  <li class="card-deck">2</li>
  <li class="card-deck">3</li>
  <li class="card-deck">4</li>
  <li class="card-deck">5</li>
  <li class="card-deck">6</li>
  <li class="card-deck">7</li>
  <li class="card-deck">8</li>
  <li class="card-deck">9</li>
  <li class="card-deck">10</li>
  <li class="card-deck">11</li>
  <li class="card-deck">12</li>
</ul>

<button class="show-more">+</button>
<button class="show-less">-</button>

删除 jQuery 中的切片增量

Remove slice increment in jQuery

javascript

jquery

increment

slice