Создание следующей / предыдущей навигации - PullRequest
Новая
       7

Создание следующей / предыдущей навигации

1 голос
/ 04 ноября 2010

Я работаю над сайтом, который имеет несколько разделов, в каждом из которых около 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, и поэтому некоторые проекты получат класс «selected», если они действительно не выбраны. Это означает, что когда вы находитесь в проекте, который состоит из нескольких разделов, и нажимаете кнопку «Следующий» или «Предыдущий», он переходит к предыдущему проекту из первого экземпляра проекта (даже если он находится в другом разделе). Мне нужен какой-то эффективный способ указать список проектов в каждом разделе, чтобы он вращался только в этих проектах.

У меня была идея добавить класс в каждый список проектов и сделать что-то вроде этого: 

  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

Проблема в том, что а) это ужасно неэффективно и б) я думаю, что даже если вы не в этом списке, он все еще имеет длину, и поэтому проблема все еще сохраняется?

1 Ответ

0 голосов
/ 04 ноября 2010

добавьте хэши в конце URL, которые задают раздел

, например /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() method.

Теперь в 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')
...