使用Jquery在数组中显示以前的项目

Question

I have this script that shows the next 16 items in the array. But i want it to show the previous 16 when the "back" button is clicked.

This is the script i'm using for the "Next" button:

 var YearList = $('.dateListItem li').toArray(); var index = 0; displayNext(); $(".arrowRight").click(function() { // display next elements displayNext(); }); function displayNext() { $(YearList).hide(); var list = $('.dateListItem'); var index = list.data('index') % YearList.length || 0; list.data('index', index + 2); $(YearList.slice(index, index + 2)).show(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="arrowRight">NEXT</a> <ul class="dateListItem"> <li>1978</li> <li>1979</li> <li>1980</li> <li>1981</li> <li>1982</li> <li>1983</li> </ul> 

So now i just need it to go the other way as well.

Thank you for any assistance.

Answer 1

You can replace this js code with yours,

var YearList = $('.dateListItem li').toArray();

var index = 0;

displayNext();

$(".arrowRight").click(function() {
  // display next elements
  displayNext();
});

$(".arrowLeft").click(function() {
  // display next elements
  displayPrev();
});

function displayNext() {
  $(YearList).hide();

  var list = $('.dateListItem'); 
  var index = list.data('index') % YearList.length || 0;

  list.data('index', index + 16);             
  $(YearList.slice(index, index + 16)).show(); 
}

function displayPrev() {
  $(YearList).hide();

  var list = $('.dateListItem'); 
  var index = list.data('index') % YearList.length || 0;
  index = index - 16;
  list.data('index', index);             
  $(YearList.slice(index - 16, index)).show(); 
}

And working jsfiddle here it is.

Answer 2

You can achieve the previous with slight modification in the function. Fiddle Link : jsfiddle

var YearList = $('.dateListItem li');

var index = 0;

displayNext();

$(".arrowLeft").click(function() {
  // display next elements
  displayPrevious();
});

$(".arrowRight").click(function() {
  // display next elements
  displayNext();
});

function displayNext() {
  $(YearList).hide();

  var list = $('.dateListItem'); 
  var index = list.data('index') % YearList.length || 0;   

   list.data('index', index+2);  
  $(YearList.slice(index, index + 2)).show(); 
}

function displayPrevious() {
  $(YearList).hide();

  var list = $('.dateListItem'); 
  var pindex = list.data('pindex') % YearList.length || 0;   
  var YearListLength = YearList.length;
  list.data('pindex', pindex+2);  
  $(YearList.slice(YearListLength-2-pindex, YearListLength-pindex)).show(); 
}