jQuery上一頁下一頁插件增強

Question

我需要通過元素與previuous和下一個按鈕。這裏是 HTML：

<ul> 
     <li><a href="#">Number 1 item</a></li> 
     <li><a href="#">Number 2 item</a></li> 
     <li><a href="#">Number 3 item</a></li> 
     <li><a href="#">Number 4 item</a></li> 
    </ul> 
<input type="button" class="next" value=">" /> 
<input type="button" class="prev" value="<" /> 

JS：

(function(){ 
    var $lis = $('ul li'); 
    var index = 0, lastIndex = 0; 

    start(); // activate first, add event listeners to buttons 

    function next(){ 
     lastIndex = index; 
     if(++index == $lis.length) index = 0; // if next is out of bounds go to first 
     $lis.eq(index).addClass('active'); 
     $lis.eq(lastIndex).removeClass('active'); 
    }; 

    function prev(){ 
     lastIndex = index; 
     if(--index < 0) index = ($lis.length - 1); // if prev is less than first to to last 
     $lis.eq(index).addClass('active'); 
     $lis.eq(lastIndex).removeClass('active'); 
    }; 
    function start(){ 
     $lis.eq(0).addClass('active'); 
     $('.next').click(next); 
     $('.prev').click(prev); 
    } 
})(); 

這個插件可以完美運行，這是Fiddle

但我想擴展它的功能。我也想啓用點擊列表直接&記住它的索引。

我的意思是：我說，我達到了，直到3號項目，而在接下來的按鈕點擊，&如果我直接點擊
<li><a href="#">Number 1 item</a></li>（貨號：1），那麼我想記得我這個位置作爲當前索引&當我點擊下一個按鈕，我應該移動到項目2

同樣的事情也與前一個按鈕。

如何擴展此功能？

Answer 1

function li_click(){ 
    lastIndex = index; 
    index = $(this).index(); 
    $lis.eq(index).addClass('active'); 
    $lis.eq(lastIndex).removeClass('active'); 
} 

function start(){ 
    $lis.eq(0).addClass('active'); 
    $('.next').click(next); 
    $('.prev').click(prev); 
    $lis.click(li_click); 
} 

這是你的jsfiddle的更新版本：http://jsfiddle.net/Rtmdj/15/

而且它並不像你真正需要的lastIndex變量，你可以只取出active類，改變index，然後添加active類到新index：

$lis.eq(index).removeClass('active'); 
index = $(this).index(); 
$lis.eq(index).addClass('active');