时间戳

首页 > 解决方案 > 删除 jQuery 中的切片增量

javascript - 删除 jQuery 中的切片增量

问题描述

我有一个列表，每个列表元素都有类.card-deck我使用 jQuery 函数 slice 只显示列表中的 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();
});

标签： javascriptjquerysliceincrement

解决方案

您需要隐藏显示的内容。

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>

推荐阅读