PUG玩索引

在使用SO后，发现了很多答案来支持我的学习过程，现在是我的时间了（因为我还没有找到对我的问题的任何答案）来寻求你的帮助。我正在学习PUG，因为有些日子，我试图用“每个”迭代来创建一个html/css幻灯片（跟随项目（狗屎，无法找到git了，太多的项目基于这个））。对不起。这里的哈巴狗代码我提出：PUG玩索引

.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仅供按钮/子弹后造型）

而这正是我试图获得在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>

当然大家都注意到了，缺少的部分是在指数：

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

部分。

有人可以教我如何迭代索引来完成这个？（你可能注意到的另一件事是，我还是新的JavaScript和法语）谢谢！

来源

2017-09-15 Pierre Moustache

你是什么意思正好与“迭代指数”？在这种情况下不删除星号是否足够？ – gandreadis

Hoy @gandreadis，是* asterix *只是污染代码......如果删除，“索引”只是返回序列中的项目数。我想要做的是返回上一个和下一个项目索引。所以对于第一个，就像：'index--'和第二个'index ++'。我尝试过没有成功。 –

啊，现在我明白了。看到我的答案可能的解决方案:) – gandreadis

所以，你需要的是圆形（环绕）算法的简单位（见还回答到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

来源

2017-09-16 07:37:29 gandreadis

谢谢，这已经使我更接近我的需求。顺便说一句，当我添加代码时，第一个和最后一个元素返回奇怪的值（分别为：不存在的8个，以及超过索引的最大数量的3个）。 [链接]（http://jsbin.com/eqenag/1/edit）查看@Roko C. Buljan的Interresting代码，在您给我的链接中找到。那将是我的一天课程。 –

所以你的代码中加入：

.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

我“M得到这个：

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

（除去类使其更清晰）正如你所看到的，第一个和最后一个项目还没有像预期的那样循环。只有中间的一个是对的。（对不起，使用'回答'而不是'评论'，我还没有找到一种方法来写多行代码...）再次感谢您的帮助！

来源

2017-09-16 09:54:53

但是，您并未实际包含我的代码：我的代码段的第一行很重要！现在，你只是测量每个文件名字符串的长度 – gandreadis

Watéénnewbie是我...谢谢你，随着变量的添加，它工作得很好。现在我只需要使'arrayLength'等于字符串中的项目数（而不是文件名字符串的长度，当然是......），而不必使用数字来定义它。任何想法？ –

您可以通过嵌入式JS代码片段（' - var images = [...]'）在代码的早期定义该图像数组，然后遍历该图像（“每个val，图像中的索引”）。然后，取代'arrayLength'，在检索数组长度时使用'images.length'。 – gandreadis

下面是一个谁想要使用它的最终哈巴狗代码：

.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

来源

2017-09-16 11:22:21

回答

相关问题