Question

我正在尝试使用jquery将两个单独的链接转到li中的下一个/上一个项目。

这是html：

<div id="previousButton">
    <h1 id="previous"><a href="#previousBox" class="previous">&lt;</a></h1>
</div>
<div id="nextButton">
     <h1 id="next"><a href="#nextBox" class="next">&gt;</a></h1>
</div>

这是jquery：

$('.next').click(function (event) {
    event.preventDefault();
    $('html,body').animate({scrollLeft: $(this.hash).offset().left - paddingWidth}, 750);
    $('li').previous().fadeTo("slow", 0.5);
    $('li').next().fadeTo("slow", 1.0);
});

$('.previous').click(function (event) {
    event.preventDefault();
    $('html,body').animate({scrollLeft: $(this.hash).offset().left - paddingWidth}, 750);
    $('li').next().fadeTo("slow", 0.5);
    $('li').previous().fadeTo("slow", 1.0);
});

但我缺少的是选择列表中下一项的实际功能，我该怎么做？我想也许每次点击nextButton时都会改变链接的目的地，但我不知道该怎么做。有任何想法吗？如果没有必要，我宁愿不使用任何外部jquery库。

Answer 1

首先，从SEO方面来说 - 你不能使用两个＆lt; h1＆gt;一页中的标签。

-

问题：

你可以结合$ .index（）函数和$ .eq（）函数。

var NextLi = $('ul.SomeUL').eq($('li.SelectedLi').index() + 1);

祝你好运

Answer 2

您可以将当前节点存储在处理程序中，并使用它来决定下一个节点，如下所示：
See it in action at jsFiddle.

$('a.next, a.previous').click (liScroller);

function liScroller (event) {
    var newNode;
    liScroller.oldNode  = liScroller.oldNode  ||  $('#scrollMe li:first');

    event.preventDefault ();
    $('html,body').animate({scrollLeft: $(this.hash).offset().left - paddingWidth}, 750);

    //--- Get the new element, depending on the direction.
    var bGoingBack      = $(this).hasClass ('previous');
    if (bGoingBack) {
        newNode         = liScroller.oldNode.prev ('li');
        if (newNode.length == 0)
            newNode     = $('#scrollMe li:last');
    }
    else {
        newNode         = liScroller.oldNode.next ('li');
        if (newNode.length == 0)
            newNode     = $('#scrollMe li:first');
    }

    //--- Do the switcheroo.
    liScroller.oldNode.fadeTo ("slow", 0.5);
    newNode.fadeTo            ("slow", 1.0);

    //--- Update stored value.
    liScroller.oldNode  = newNode;
}

jquery转到下一个元素

2 个答案: