PUG jouant avec l'index

Question

Après avoir utilisé SO et trouvé beaucoup de réponses pour nourrir mon processus d'apprentissage, il est temps pour moi (et parce que je n'ai pas encore trouvé de réponse à mon problème) de vous demander votre aide. J'apprends PUG depuis quelques jours, et j'essaie d'utiliser "chaque" itération pour créer un diaporama html/css (suivant le projet de (merde, ne trouve plus le git, trop de projets basés sur ce)). Désolé. Voici le code carlin j'ai fait:

.slideshow 
    each val, index in ['img-1.jpg', 'img-2.jpg', 'img-3.jpg'] 
    input(type="radio" name="ss" id='ss-img-' + index).ss-bullet 
    .ss-img 
     img(src=val) 
     label(for='ss-img-' + *index*).ss-nav-prev Image précédente 
     label(for='ss-img-' + *index*).ss-nav-next Image suivante 

(.classes sont seulement pour un style plus tard des boutons/balles)

Et ce que je suis en train d'obtenir, en html:

<div class="slideshow"> 
     <input class="ss-bullet" type="radio" name="ss" id="ss-img-0"> 
     <div class="ss-img"><img src="img/img-1.jpg"> 
     <label class="ss-nav-prev" for="ss-img-2">Image précédente</label> 
     <label class="ss-nav-next" for="ss-img-1">Image suivante</label> 
     </div> 
     <input class="ss-bullet" type="radio" name="ss" id="ss-img-1"> 
     <div class="ss-img"><img src="img/img-2.jpg"> 
     <label class="ss-nav-prev" for="ss-img-0">Image précédente</label> 
     <label class="ss-nav-next" for="ss-img-2">Image suivante</label> 
     </div> 
     <input class="ss-bullet" type="radio" name="ss" id="ss-img-2"> 
     <div class="ss-img"><img src="img/img-3.jpg"> 
     <label class="ss-nav-prev" for="ss-img-1">Image précédente</label> 
     <label class="ss-nav-next" for="ss-img-0">Image suivante</label> 
     </div> 
    </div> 

Bien sûr, comme vous tous remarqué, la partie manquante dans l'index :

label(for='ss-img-' + *index*) 

partie. Est-ce que quelqu'un peut m'apprendre s'il vous plaît comment itérer l'index pour compléter ceci? (une autre chose que vous avez probablement remarqué est que je suis encore nouveau pour javascript, et français) Merci!

Answer 1

Donc, ce que vous avez besoin est un peu simple de l'arithmétique circulaire (wrap-around) (voir aussi des réponses à this SO question):

- var arrayLength = 3; 
label(for='ss-img-' + ((index + arrayLength - 1) % arrayLength)).ss-nav-prev Image précédente 
label(for='ss-img-' + ((index + 1) % arrayLength)).ss-nav-next Image suivante 

Answer 2

donc avec votre code ajouté:

.slideshow 
    each val, index in ['img-1.jpg', 'img-2.jpg', 'img-3.jpg'] 
    input(type="radio" name="ss" id='ss-img-' + index) 
    .ss-img 
     img(src=val) 
     label(for='ss-img-' + ((index + val.length - 1) % val.length)) Image précédente 
     label(for='ss-img-' + ((index + 1) % val.length)) Image suivante 

I « m obtenir ceci:

<div class="slideshow"> 
     <input type="radio" name="ss" id="ss-img-0"> 
     <div class="ss-img"><img src="img-1.jpg"> 
     <label for="ss-img-8">Image précédente</label> 
     <label for="ss-img-1">Image suivante</label> 
     </div> 
     <input type="radio" name="ss" id="ss-img-1"> 
     <div class="ss-img"><img src="img-2.jpg"> 
     <label for="ss-img-0">Image précédente</label> 
     <label for="ss-img-2">Image suivante</label> 
     </div> 
     <input type="radio" name="ss" id="ss-img-2"> 
     <div class="ss-img"><img src="img-3.jpg"> 
     <label for="ss-img-1">Image précédente</label> 
     <label for="ss-img-3">Image suivante</label> 
     </div> 
    </div> 

(enlevé les classes pour le rendre plus clair) Comme vous pouvez le voir, les premier et dernier éléments ne bouclent pas encore comme prévu. Seul celui du milieu a raison. (Et désolé d'utiliser 'réponse' au lieu de 'commentaire', je n'ai pas trouvé un moyen d'écrire plusieurs lignes de code ...) Merci encore pour votre aide!

Answer 3

Voici le code carlin final pour celui qui veut l'utiliser:

.slideshow 
    - var imgs = ['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg', 'img/img-4.jpg', 'img/img-5.jpg', 'img/img-6.jpg'] 
    each img, index in imgs 
    input(type="radio" name="ss" id=('ss-img-' + index) checked=(index === 0)).ss-bullet 
    .ss-img 
     img(src=img) 
     label(for='ss-img-' + ((index + imgs.length - 1) % imgs.length)).ss-nav-prev Image précédente 
     label(for='ss-img-' + ((index + 1) % imgs.length)).ss-nav-next Image suivante