javascript - Show only 7 list items in list, on "next"click hide current 7 show next 7, same with "previous"click

Question

我有一个长长的 list

<a class="prev">prev</a>
<a class="next">next</a>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

我想要实现的是，只显示前 3 个列表项，如果单击“下一个”隐藏当前 3 并显示下一个 3，依此类推......与上一个相同，如果单击隐藏当前3 并显示前 3...

这是我目前拥有的:http://jsfiddle.net/tfa0Lyem

它似乎有效，但我无法解决如何隐藏当前显示的元素..

Answer 1

您可以使用 slice显示和隐藏您的 li - 请参阅下面代码中的注释

var current = 0,
  numToShow = 3,
  $li = $('#myList').children();          // get all li once and work with this set for better performance

function showLi() {
  var startIndex = current * numToShow;   // calculate your slice start number
  if (startIndex > $li.length) {          // if start number greater than number of li, reset
    startIndex = 0;
    current = 0;
  } else if (current < 0) {               // if start number less than 0, reset to end
    current = Math.floor($li.length / numToShow);
    startIndex = current * numToShow;
  }

  $li.hide()                                   // hide all li
    .slice(startIndex, startIndex + numToShow) // slice off the ones you want to show
    .show();                                   // show them
}

showLi();

$('#next').click(function() {
  current++; // increment current
  showLi();
})

$('#prev').click(function() {
  current--; // decrement current
  showLi();
})

#myList li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>

<a id="prev">prev</a>
<a id="next">next</a>