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

【问题标题】：Show previous items in array with Jquery使用 Jquery 在数组中显示以前的项目
【发布时间】：2017-02-02 10:44:07
【问题描述】：

我有一个显示数组中接下来的 16 个项目的脚本。但我希望它在单击“后退”按钮时显示前 16 个。

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

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>

所以现在我只需要它走另一条路。

感谢您的帮助。

【问题讨论】：

完全一样，只是你想使用比当前索引低 16 的索引。
更低？如使用'-'？看看这里吧，好像没看对呢jsfiddle.net/omp2uheb

标签： javascript jquery arrays

【解决方案1】：

你可以用你的替换这个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(); 
}

在这里工作jsfiddle。

【讨论】：

【解决方案2】：

你可以在功能上稍作修改就可以实现上一个。小提琴链接：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(); 
}

【讨论】：