创建下一个/上一个导航

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 

的问题，这是一个），这是非常低效和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（称为散列），我们可以通过javascript与window.location.hash属性来访问它。

但它也会返回#字符，所以我们需要使用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')