Question

我需要通过前置和下一个按钮来浏览元素。这是 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

但我想扩展其功能。我还想直接点击列表＆amp;记住它的索引。

我的意思是：说，我点击下一个按钮，直到第3项，＆amp;如果我直接点击
<li><a href="#">Number 1 item</a></li>（项目编号：1）然后我想记住我的这个位置作为当前索引＆amp;当我点击下一个按钮时，我应该转到第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');

jQuery上一页下一页插件增强功能

1 个答案: