玩索引的哈巴狗

Question

在使用 SO 并找到很多答案来满足我的学习过程之后，是时候让我（因为我还没有找到我的问题的任何答案）寻求您的帮助。几天以来我一直在学习 PUG，我正在尝试使用 "each" 迭代来创建一个 html/css 幻灯片（在（该死的项目之后，再也找不到 git ，太多基于此的项目））。对不起。这是我制作的哈巴狗代码：

.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

(.类仅用于 buttons/bullets)

的后期样式

这就是我想要获得的，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>

当然你们都注意到了，缺失的部分在 index:

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

部分。

有人可以教我如何迭代索引来完成这个吗？（您可能注意到的另一件事是我对 javascript 和法语还是陌生的）谢谢！

Answer 1

因此，您需要的是一些简单的循环（环绕）算法（另请参阅 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

添加您的代码后：

.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

我明白了：

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

（删除了类以使其更清楚）如您所见，第一项和最后一项尚未按预期循环。只有中间那个是对的。（很抱歉使用 'answer' 而不是 'comment'，我还没有找到编写多行代码的方法...）再次感谢您的帮助！

Answer 3

这是供想要使用它的人使用的最终 pug 代码：

.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

玩索引的哈巴狗

PUG playing with index

iteration

slideshow

pug