前の項目をJqueryで配列に表示

Question

配列内の次の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>

は、だから今、私はちょうどそれが、他の道を行く必要があります。

ありがとうございました。

Answer 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をされた作業を置き換えることができます。

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