创建下一个/上一个导航

Posted 2023-02-25

【中文标题】创建下一个/上一个导航

【英文标题】：Creating Next/Previous Navigation

【发布时间】：2010-11-04 13:59:01

【问题描述】：

我正在开发一个包含多个部分的网站，每个部分包含大约 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) 我认为即使您不在该列表中，它仍然有长度，所以问题仍然存在？

【参考方案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')

【讨论】：

好的，我认为这是有道理的。那么，在每个一般项目页面上，我都会在侧边栏链接中添加适当的 # 结尾吗？然后我会将代码更改为您上面的代码。这会消除重复每个部分的代码的需要吗？我想我理解这个概念，但你的执行方式对我来说没有多大意义。 $() 里面的代码选择了什么？那将如何选择正确的 li？

@andrew 是的，您的项目 url 需要添加 #<SECTION_HERE> 部分。我还用更多信息更新了我的答案..

这很有意义。非常感谢您的帮助！