我有一堆具有不同父元素的相同类型的元素,但是我希望能够无缝导航/循环所有这些元素,就像它们在一起一样。

<div>
    <a href="#"></a>
    <a href="#" class="open></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

<div>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

<div>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

<a href="#" class="prev">&lsaquo;</a>
<a href="#" class="next">&rsaquo;</a>


我设法做到了这一点:https://jsfiddle.net/pj0ecxge/

当前,它不能按预期运行,因为prev()和next()仅用于定位同级元素,因此,如果上一个或下一个元素在另一个父级中,则箭头不起作用。

默认情况下,单个元素将始终处于打开状态,但并不总是与示例中所示的元素相同。同样,只能同时打开一个元素。

如果有区别,我可以向所有子元素添加一个类,但是不能更改HTML结构,即将它们全部放在同一个父元素中。

如果导航是无限的,那就太好了-即在打开最后一个元素时单击“下一步”将显示第一个元素,反之亦然,但是如果这样做太复杂,则不需要这样做。

在此先感谢您,任何帮助将不胜感激!

最佳答案

当前集合到达任一末端时,找到下一个集合。如果集合是最后一个集合,则返回第一个集合(反之亦然)。

$('.prev').click(function(e) {
    e.preventDefault();

    var current = $('.open');
    var prev = current.prev();
    if (!prev.length) {
        prev = current.parent().prev('div').children('a:last-of-type');
        if (!prev.length) {
            prev = $('div:last-of-type').children('a:last-of-type');
        }
    }

    current.removeClass('open');
    prev.addClass('open');
});

$('.next').click(function(e) {
    e.preventDefault();

    var current = $('.open');
    var next = current.next();

    if (!next.length) {
        next = current.parent().next('div').children('a:first-of-type');
        if (!next.length) {
            next = $('div:first-of-type').children('a:first-of-type');
        }
    }

    current.removeClass('open');
    next.addClass('open');
});

07-24 09:50
查看更多