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

我有一个脚本，它显示了数组中接下来的16项。但是我想在点击“后退”按钮时显示前16个

这是我用于“下一步”按钮的脚本：

var YearList=$（'.dateListItem li'）.toArray（）；
var指数=0；
displayNext（）；
$（“.arrowRight”）。单击（函数（）{
//显示下一个元素
displayNext（）；
});
函数displayNext（）{
$（YearList.hide（）；
变量列表=$（'.dateListItem'）；
var index=list.data（'index'）%YearList.length|0；
列表数据（“索引”，索引+2）；
$（YearList.slice（index，index+2））.show（）；
}

一九七八年
1979年
1980年
1981年
1982年
1983年

您可以将此js代码替换为您的代码

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(); 
}

---

在这里工作。

只需对函数稍加修改即可实现上一个功能。 小提琴链接：

---

完全相同的方法，只是您希望使用比当前索引低16的索引。更低？在使用'-'时？看一下这里，好像不太对劲

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(); 
}