删除 jQuery 中的切片增量-解网

问：

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

我需要的也是一个减少 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();
});

JavaScript jQuery 切片增量

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 中未定义的属性“slice”

删除 jQuery 中的切片增量

Remove slice increment in jQuery

评论