Question

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

<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结构，即将它们全部放在同一个父元素中。

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

提前致谢，非常感谢任何帮助！

Answer 1

您可以检查是否有下一个/上一个元素，如果没有，那么您可以向上/向下移动图层

$('.prev').click(function(e) {
  e.preventDefault();

  var current = $('.open');
  var prev = current.prev();

  if (!prev.length) {
    prev = current.parent().prev('div').children('a:last-child')
  }

  if (prev.length) {
    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-child')
  }

  if (next.length) {
    current.removeClass('open');
    next.addClass('open');
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}
div {
  font-size: 0;
}
div a {
  width: 150px;
  height: 150px;
  border: 2px solid black;
}
a {
  display: inline-block;
}
.open {
  background: red;
}
.prev,
.next {
  font-size: 100px;
  text-decoration: none;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

当前集合到达任何一端时找到下一个集合。如果该集合是最后一个，则返回第一个（反之亦然）。

$('.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');
});

jQuery - 非兄弟姐妹之间的上一个/下一个导航

2 个答案: