仅显示列表中的 7 个列表项，在“下一个”上单击隐藏当前 7 显示下一个 7，与“上一个”单击相同

Question

我的清单很长

<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

由于您还标记了 javascript 并且所有答案都在 jQuery 中，所以我向您展示了一个普通的解决方案。它故意比需要的更详细，以便示例易于理解。

所有内容都包含在可变对象中，因此您可以轻松更改列表大小和当前索引。这样您还可以动态更改列表和目标（列出项目的位置）

我知道您正在使用 jQuery 编写代码，但有人可能会觉得它很有用。

const list = {
  target: document.getElementById("myUl"),
  fullList: document.getElementById("myUl").querySelectorAll(".myLi"),
  itemsToList: 7,
  index: 0,
  // remove all children, append the amout of items we want
  update: function() {
    while (this.target.firstChild) {
      this.target.removeChild(this.target.firstChild);
    }
    for (let i = 0; i < this.itemsToList; i += 1) {
      if(this.fullList[this.index + i]) {
        this.target.appendChild(this.fullList[this.index + i]);
      }
    }
  },
  prev: function() {
    // if index 1 is displayed, go to end of list
    if (this.index <= 0) { 
      this.index = this.fullList.length; 
    }
    // decrement the index
    this.index -= this.itemsToList;
    // lower edge case, catch to always list the same amout of items
    if (this.index < 0) { 
      this.index = 0; 
    }
  },
  next: function() {
    // increment the index
    this.index += this.itemsToList;
    // if last item is shown start from beginning
    if (this.index >= this.fullList.length) {
      this.index = 0;
    } 
    // catch upper edge case, always list the same amout of items
    else if ( this.index > this.fullList.length - this.itemsToList + 1) {
      this.index = this.fullList.length - this.itemsToList;
    }
  }
}
// initialize by removing list and showing from index[0]
list.update();

document.getElementById("prev").addEventListener('click', function () {
  list.prev();
  list.update();
});

document.getElementById("next").addEventListener('click', function () {
  list.next();
  list.update();
});

<button id="prev">prev</button>
<button id="next">next</button>
  <ul id="myUl">
  <li class="myLi">item 1</li>
  <li class="myLi">item 2</li>
  <li class="myLi">item 3</li>
  <li class="myLi">item 4</li>
  <li class="myLi">item 5</li>
  <li class="myLi">item 6</li>
  <li class="myLi">item 7</li>
  <li class="myLi">item 8</li>
  <li class="myLi">item 9</li>
  <li class="myLi">item 10</li>
  <li class="myLi">item 11</li>
  <li class="myLi">item 12</li>
  <li class="myLi">item 13</li>
  <li class="myLi">item 14</li>
  <li class="myLi">item 15</li>
  <li class="myLi">item 16</li>
  <li class="myLi">item 17</li>
  <li class="myLi">item 18</li>
  <li class="myLi">item 19</li>
  <li class="myLi">item 20</li>
  <li class="myLi">item 21</li>
  <li class="myLi">item 22</li>
  <li class="myLi">item 23</li>
  <li class="myLi">item 24</li>
  <li class="myLi">item 25</li>
  <li class="myLi">item 26</li>
  <li class="myLi">item 27</li>
  <li class="myLi">item 28</li>
  <li class="myLi">item 29</li>
  <li class="myLi">item 30</li>
  <li class="myLi">item 31</li>
</ul>

Answer 2

你可以试试这个

jQuery(document).ready(function () {
    size_li = jQuery("#myList li").size();
    x = 3;
    y = 0;
    jQuery('#myList li:lt('+x+')').show();
    jQuery('#next').click(function () {
        x = (x+3 <= size_li) ? x+3 : size_li;
        y= x-3
        jQuery('#myList li:lt('+x+')').show();
         jQuery('#myList li:lt('+y+')').hide();
    });
    jQuery('#prev').click(function () {
        jQuery('#myList li:lt('+x+')').hide()
        x = (x-3<0) ? 0 : x-3;
        y = (x - 3 <= 0 ) ? 0 : x - 3 ;
        jQuery('#myList li:lt('+x+')').show();
        jQuery('#myList li:lt('+y+')').hide()
       }); 
});

#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>

Answer 3

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

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>

Answer 4

我认为这应该可以（我没有测试它，但结构应该是这样的）

var liSize = $("li").length();
    var change = 3;  // Elements you want to show or hide
    var Last = change-1;   // Keep the posicion of the last <li> visible elemente
    $("#next").click(function(){
        $("li").css("display","none");  // Hide all <li> elements
        for(var i=0; i<change; i++){   // repeat 3 times, or depending on change variable
            if(Last<liSize){   // Stop after the last existing element
                Last++;    // change the position to the next element
                $("lit:nth-child("+Last+")").css("display","block");   // Show the next element 
            }
        }
    });
    $("#previous").click(function(){
        Last-= change;          // Obtain the first visible elemente
        $("li").css("display","none");   // Hide all elements
        for(var i=0; i<change; i++){
            if(Last>=0){   // stop after the first element changes
                $("li:nth-child("+Last+")").css("display","block");
                Last-1;    
            }
        }
    });

Answer 5

jQuery(document).ready(function () {
    var size_li = jQuery("#myList li").size();
    // visible list length, if you want show 7 ,change it
    var step = 3;
    // first visible list 
    var cache = 3;
    jQuery('#myList li:lt('+cache+')').show();

    jQuery('#next').click(function () {
        cache = (cache+step <= size_li) ? cache+step : size_li;
        jQuery('#myList li:lt('+cache+')').show();
        jQuery('#myList li:lt('+(cache-step)+')').hide();
        //  
    });
    jQuery('#prev').click(function () {
        cache = (cache-step<step) ? step : cache-step;
        console.log(cache)
        jQuery('#myList li:lt('+(cache)+')').show();
        jQuery('#myList li:lt('+(cache-step)+')').hide();
        jQuery('#myList li:gt('+(cache-1)+')').hide();

    });
});