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

然后，您可以在找到next / prev时使用location.hash定位特定部分

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

一步一步的解释

当网址有#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')

创建下一个/上一个导航

1 个答案: