Question

我有一个带有somes字符串（图像路径）的数组，我希望能够每3次迭代进行一次for并继续执行，以制作具有3张图像的幻灯片

示例：数组：[“ url1”，“ url2”，“ url3”，“ url4”，“ url5”，“ url6”，“ url7”]

我的代码：

<% project.othersimages.forEach((img, index) => { %>
                <%if(index % 3 == 2) {%>
                    <div class="slideshow-container">


                            <div class="mySlides fade">
                                <img src="/<%=img.url%>" style="width:30%">
                                <img src="/<%=img.url%>" style="width:30%">
                                <img src="/<%=img.url%>" style="width:30%">
                            </div>


                            <!-- Next and previous buttons -->
                            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                            <a class="next" onclick="plusSlides(1)">&#10095;</a>
                        </div>
                <%}%>

                <%})%>

我希望结果像这样：

    <div class="slideshow-container">
        <div class="mySlides fade">
            <img src="/url1" style="width:30%">
            <img src="/url2" style="width:30%">
            <img src="/url3" style="width:30%">
        </div>
<div class="mySlides fade">
            <img src="/url4" style="width:30%">
            <img src="/url5" style="width:30%">
            <img src="/url6" style="width:30%">
        </div>
<div class="mySlides fade">
            <img src="/url7" style="width:30%">
        </div>

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>

有什么想法吗？

编辑

我的新代码：

<%if (project.othersimages.length > 0) {%>
                <% for(let i = 1; i < (project.othersimages.length / 3)+1; i++) { %>

                <div class="slideshow-container">


                            <div class="mySlides fade">
                                <% for(let x = 0; x < 3; x++) {

                                    if( project.othersimages[ (((i*3) - 3 ) + x) ]) { %>
                                <img src="<% project.othersimages[ (((i*3) - 3 ) + x) ] %>" style="width:30%">
                                <% } %>

                                <% } %>
                            </div>


                            <!-- Next and previous buttons -->
                            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                            <a class="next" onclick="plusSlides(1)">&#10095;</a>
                        </div>
                    <%}%>
            <%}%>

console.log of otherimages：

"othersimages" : [ 
        "project-WhatsApp Image 2019-03-17 at 11.15.55.jpeg", 
        "project-WhatsApp Image 2019-03-17 at 11.15.56.jpeg", 
        "project-WhatsApp Video 2019-03-09 at 16.45.43.mp4", 
        "project-WhatsApp Video 2019-03-17 at 11.15.51.mp4"
    ],

谢谢

Answer 1

foreach和mod（％）运算符的索引参数如何？

array.forEach((img, index) => {
    if(index % 3 == 2) {
        console.log("i am the third. index : " + index);
    }
})

Answer 2

答案

您可以使用两个for循环和一个内部检查来确保数组项存在。

我不知道您使用的是哪个模板系统，所以我不确定如何获取变量。

如果您将<% javascript %>用于条件，将<%= variable %>用于获取变量，则在下面的示例代码中，您将需要对此进行更改：

<img src="<% array[ (((i*3) - 3 ) + x)) ] %>" style="width:30%">

对此：

 <img src="<%= array[ (((i*3) - 3 ) + x))] %>" style="width:30%">

示例：

<% for(let i = 1; i < (array.length / 3)+1; i++) { %>

<div class="mySlides fade">

<% for(let x = 0; x < 3; x++) { 

  if( array[ (((i*3) - 3 ) + x)) ]) { %>
     <img src="<% array[ (((i*3) - 3 ) + x)) ] %>" style="width:30%">
   <% } %>

  <% } %>
 </div>

 <% } %>

Answer 3

您可以提取数组索引并使用模数来确定输出

let data=['url','url2','url3','url4','url5','url6','url7','url8'];

data.forEach((item,key)=>{

  if(key %3==0){
    //output the div starting tag
  }

  //output the array element as img

  if(key %3 ==0){
    //output the div closing tag
  }

})

每3次迭代继续循环

3 个答案:

答案

示例：