创建下一个/上一个导航

Question

我正在开发一个包含多个部分的网站，每个部分包含大约 5-10 个项目。我正在尝试创建下一个/上一个导航，允许您滚动浏览每个部分中的项目。这是我为此编写的代码：

  var prev_li     = $('.projects ul li.selected').prev('li'),
  prev_href   = $(prev_li).children().attr('href'),
  next_li     = $('.projects ul li.selected').next('li'),
  next_href   = $(next_li).children().attr('href');

$('#previous-project').click(function(e){
        if ($(prev_li).length) {
          window.location = prev_href;
          return false;
        } else {
          window.location = last_href;
          return false;
        }
  });

然后在下一个项目中也是如此。我的问题是有重复的项目（有些项目在多个部分）。这意味着多个项目具有相同的 URL，因此某些项目在真正未被选中时会获得“选中”类。这意味着当您在一个位于多个部分的项目中并单击下一个或上一个按钮时，它将从项目的第一个实例转到上一个项目（即使它在另一个部分中）。我需要一些有效的方法来指定每个部分中的项目列表，因此它只会在这些项目中轮换。

我的一个想法是为每个项目列表添加一个类并执行以下操作：

  var traeng_prev_li     = $('.transportation-engineering.projects ul li.selected').prev('li'),
      traeng_prev_href   = $(traeng_prev_li).children().attr('href'),
      traeng_next_li     = $('.transportation-engineering.projects ul li.selected').next('li'),
      traeng_next_href   = $(traeng_next_li).children().attr('href');

// same variables for each section

  $('#previous-project').click(function(){
    if ($(traeng_prev_li).length) {
      window.location = traeng_prev_href;
      return false;
    } else if ($(struct_prev_li).length) {
      window.location = struct_prev_href;
      return false;
    } else if ($(civil_prev_li).length) {
      window.location = civil_prev_href;
      return false;
    } else if ($(archi_prev_li).length) {
      window.location = archi_prev_href;
      return false;
.... //all the way down through all the sections

这样做的问题是 a) 它效率极低 b) 我认为即使您不在该列表中，它仍然有长度，所以问题仍然存在？

Answer 1

在指定部分的网址末尾添加哈希

点赞/projects/poplar_street_roundabou#transportation-facilities

然后您可以在查找下一个/上一个时使用location.hash 定位特定部分

var prev_li = $('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

---

分步说明

当 url 有 #transportation-facilities（称为哈希）时，我们可以使用 window.location.hash 属性从 javascript 访问它。

但它也会返回# 字符，因此我们需要使用substring() 方法将其删除。

现在在 jquery 中，我们需要定位 ul，它位于具有 projects 类和 transportation-facilities 类的元素内。在 CSS 中，这是通过使用 multiple class selector 来实现的，例如 .class1.class2 将匹配同时分配有 class1 和 class2 的元素。

所以这一行

$('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

翻译成

$('.projects.transportation-facilities ul li.selected').prev('li')