創建下一個/上一個導航

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')