Création de la navigation suivante/précédente

Question

Je travaille sur un site comportant plusieurs sections, chacune comportant environ 5 à 10 projets. J'essaie de créer une navigation suivante/précédente qui vous permettra de faire défiler les projets dans chaque section. C'est le code que j'ai eu pour cela:

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; 
     } 
    }); 

Et puis la même chose pour le prochain projet. Mon problème est qu'il y a des projets en double (certains projets sont dans plusieurs sections). Cela signifie que plusieurs projets ont la même URL et que certains projets obtiendront la classe "selected" quand ils ne sont pas vraiment sélectionnés. Cela signifie que lorsque vous êtes sur un projet qui est en section multiple et que vous cliquez sur le bouton suivant ou précédent, il ira au projet précédent à partir de la première instance du projet (même si c'est dans une autre section). J'ai besoin d'un moyen efficace de spécifier la liste des projets dans chaque section et donc il tourne seulement à travers ces projets.

Une idée que j'avais été d'ajouter une classe à chaque liste de projets et faire quelque chose comme ceci:

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 

Le problème est a) il est terriblement inefficace et b) je pense que même si vous ne sont pas sur cette liste, il a encore une longueur et donc le problème persiste toujours?

Answer 1

ajouter hash à la fin des urls qui spécifient la section

comme /projects/poplar_street_roundabou#transportation-facilities

vous pouvez utiliser la location.hash pour cibler la section spécifique lors de la recherche suivante/précédente

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

---

sorte d'explication pas à pas

lorsque l'URL a un #transportation-facilities (appelé hachage) nous pouvons y accéder à partir de javascript avec la propriété window.location.hash.

mais il renverra également le caractère #, nous devons donc l'enlever en utilisant la méthode substring().

Maintenant en jquery nous devons cibler le ul qui est à l'intérieur d'un élément qui a la classe projects mais aussi la classe transportation-facilities. En CSS ceci est réalisé en utilisant le multiple class selector par exemple .class1.class2 va correspondre aux éléments qui ont à la fois class1 et class2 qui leur sont assignés.

si cette ligne

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

se traduit

$('.projects.transportation-facilities ul li.selected').prev('li')