Question

我创建了一个带有链接的小型存档布局，我需要添加某种形式的分页。我不想重新加载页面所以我去了JS导航而不是我一次加载所有链接，然后通过prev / next按钮一次显示/隐藏10。每10个项目都有自己的列表容器（ul）。

JS，

   if ($('.archive').length > 0) {
        var lists = [],
            traverse = 0;
        $('.archive ul').each(function() {
          lists.push($(this));
        });
      }
      $('.previous').click(function(e) {
        traverse--;
        if (traverse === 0) {
          $(this).addClass('inactive');
        }
        e.preventDefault();
      });
      $('.next').click(function(e) {
        traverse++;
        if (traverse === lists.length) {
          $(this).addClass('inactive');
        }
        e.preventDefault();
      });
    }

HTML，

<div class="archive">
    <ul>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
    </ul>
    <ul>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
    </ul>
    <ul>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
    </ul>
    <nav>
        <a href="#" class="previous"></a>
        <a href="#" class="next"></a>
    </nav>
 </div>

CSS，

    ul:not(:first-of-type) {
        display: none;
    }

这适用于实际导航，但我不确定如何引用每个列表以隐藏/显示它们。任何帮助表示赞赏！

Answer 1

找到解决方案。在JS中，添加以下内容

  if ($('.archive ul').length > 1) {
    $('.previous, .next').css('display', 'inline-block');
    var lists = [];
        i = 0;
    $('.archive ul').each(function() {
      lists.push($(this));
    });
  }
  $('.previous').click(function(e) {
    i--;
    $('.archive ul:visible').fadeOut(function() {
      lists[i].fadeIn(200);
    });
    if (i < lists.length) {
      $('.next').removeClass('inactive');
    }
    if (i === 0) {
      $(this).addClass('inactive');
    }
    e.preventDefault();
  });
  $('.next').click(function(e) {
    i++;
    $('.archive ul:visible').fadeOut(function() {
      lists[i].fadeIn(200);
    });
    if (i > 0) {
      $('.previous').removeClass('inactive');
    }
    if (i === lists.length - 1) {
      $(this).addClass('inactive');
    }
    e.preventDefault();
  });

我添加了一个额外的检查器，看看是否有多个列表，在这种情况下隐藏/显示导航。

在数组中引用ul列表并切换其可见性

1 个答案: