如何获得数组上的第二个索引

Question

我正在尝试遍历图像数组，单独显示每个图像并使用按钮移动到下一个。 但是，当单击按钮时，它会移动到下一个图像上，但是在第二个图像之后，它不会移动到第三个图像上等等任何人都可以找到循环卡住的地方吗？

 function changeImage() { var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"] var currentImage = 0; currentImage += 1; if (currentImage >= imageArray.length) { currentImage = 0; } document.getElementById("mainImage").src = imageArray[currentImage] }

 <!DOCTYPE html> <html> <head> <title> App Icons? </title> <link rel="stylesheet" type="text/css" href="/Users/Website/css/mainstyle.css"> <script type="text/javascript" src="/Users/rate/js/main.js"></script> </head> <body class="body"> <div> <div> <hr> <div class=topbar> <h1> Do you find this App Icon aesthically pleasing</h1> </div> <hr> <div id=displayedImage> </div> <img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" /> <div id=answer> <label> Strongly Agree </label> <label><input type="radio" name="answer" value="1" required><span>1</span></label> <label><input type="radio" name="answer" value="2" required><span>2</span></label> <label><input type="radio" name="answer" value="3" required><span>3</span></label> <label><input type="radio" name="answer" value="4" required><span>4</span></label> <label><input type="radio" name="answer" value="5" required><span>5</span></label> <label> Strongly disagree</label> <hr> </div> <input type="button" onclick="changeImage()" value="I am complete">

Answer 1

首先是范围。 您的currentImage应该全局声明，否则它将始终从 0 开始。其次，数组中最后一个元素的索引等于数组长度减 1，因此您需要根据imageArray.length - 1检查currentImage ：

 var currentImage = 0; function changeImage() { var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"] if (currentImage >= imageArray.length - 1) { currentImage = 0; } else { currentImage += 1; } document.getElementById("mainImage").src = imageArray[currentImage] console.log(currentImage); }

 <div> <div> <hr> <div class=topbar> <h1> Do you find this App Icon aesthically pleasing</h1> </div> <hr> <div id=displayedImage> </div> <img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" /> <div id=answer> <label> Strongly Agree </label> <label><input type="radio" name="answer" value="1" required><span>1</span></label> <label><input type="radio" name="answer" value="2" required><span>2</span></label> <label><input type="radio" name="answer" value="3" required><span>3</span></label> <label><input type="radio" name="answer" value="4" required><span>4</span></label> <label><input type="radio" name="answer" value="5" required><span>5</span></label> <label> Strongly disagree</label> <hr> </div> <input type="button" onclick="changeImage()" value="I am complete">

如何获得数组上的第二个索引

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-08 14:47:19

如何获得数组上的第二个索引

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-08 14:47:19

解决方案1
1 已采纳 2020-11-08 14:47:19