Question

我想一次只显示3个列表项，点击下一个和后退按钮，它将分别导航到下一个/上一个列表项。

[1,2,3]

下一步按钮：[2,3,4]

上一页按钮：[1,2,3]

HTML：

<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
<li>Nineteen</li>
<li>Twenty one</li>
<li>Twenty two</li>
<li>Twenty three</li>
<li>Twenty four</li>
<li>Twenty five</li>

的 JS：

$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
    x= (x+5 <= size_li) ? x+5 : size_li;
    $('#myList li:lt('+x+')').show();
});
$('#showLess').click(function () {
    x=(x-5<0) ? 3 : x-5;
    $('#myList li').not(':lt('+x+')').hide();
});

}）;

到目前为止

代码：Fiddle

Answer 1

使用一个处理程序并使用slice()的方法。

var $items =  $("#myList li");
$items.filter(':lt(3)').show()

$('#loadMore, #showLess').click(function () {
    var more  = $(this).is('#loadMore'),
        first = $items.filter(':visible:first').index(),
        start = more ? ++first : --first;

    if(start > -1 && start <= $items.length - 3){
       $items.hide().slice(start, start+3).show();
    }
});

这将在两端停止，因此始终至少3个可见。将留给你根据需要调整按钮可见性/类

DEMO

Answer 2

使用.slice获取一系列元素

$(document).ready(function () {
    size_li = $("#myList li").size();
    x = 0;
    numToShow = 3;
    numToIncrement = 1;
    $('#myList').find('li').hide().slice(x, x + numToShow).show();
    $('#loadMore').click(function () {
        x = (x + numToIncrement < size_li - numToShow + 1) ? x + numToIncrement : x;
        $('#myList').find('li').hide().slice(x, x + numToShow).show();
    });
    $('#showLess').click(function () {
        x = (x - numToIncrement < 0) ? 0 : x - numToIncrement;
        $('#myList').find('li').hide().slice(x, x + numToShow).show();
    });
});

http://jsfiddle.net/q5j8fqx1/13/

使用单个回调可以被认为是更优雅的解决方案

$(document).ready(function() {
  x = 0, numToShow = 3, numToIncrement = 1;
  var $lis = $('#myList').find('li');
  $lis.slice(x, x + numToShow).show();
  $('#loadMore, #showLess').click(function() {
    x += 1 + $(this).is('#showLess') * -2;
    x = Math.min(Math.max(x, 0), $lis.length - numToShow);
    $lis.hide().slice(x, x + numToShow).show();
  });
});

#myList li {
  display: none;
}
#loadMore {
  color: green;
  cursor: pointer;
}
#loadMore:hover {
  color: black;
}
#showLess {
  color: red;
  cursor: pointer;
}
#showLess:hover {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
  <li>Fifteen</li>
  <li>Sixteen</li>
  <li>Seventeen</li>
  <li>Eighteen</li>
  <li>Nineteen</li>
  <li>Twenty one</li>
  <li>Twenty two</li>
  <li>Twenty three</li>
  <li>Twenty four</li>
  <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

http://jsfiddle.net/q5j8fqx1/16/

Answer 3

试试这个：您可以使用.slice()来显示/隐藏li。见下面的代码和演示链接

HTML：

<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

<div id="Previous">Load Previous</div>
<div id="Next">Show Next</div>

jQuery：

var start = 0;
    var end = 3;
    size_li = $("#myList li").size();
    $('#Previous').click(function () {
       if(start >0)
       {
           $("#myList li").hide();
           start = start - 1;
           end = end - 1;
           $("#myList li").slice(start, end).show();
       }

    });

    $('#Next').click(function () {
       if(end < size_li)
       {
           $("#myList li").hide();
           start = start + 1;
           end = end + 1;
           $("#myList li").slice(start, end).show();
       }
    });

<强> JSFiddle demo

一次显示3个列表项并逐个导航

3 个答案: