Question

我不是那些在编程方面长大，或者在高中时经历过的人之一。我刚刚开始在大学学习基础知识。我下面的内容是我一直在使用Visual Studio 2012的javascript / html。我的目标是通过按下名为“Next Name”的按钮一次显示一个图像（如您所见，我创建了一个“形式“在我的代码的底部）。但正如我现在所知，它同时打印出我的“hw1.txt”中的所有图像。在我的for循环中，我尝试了“result =”“;”然后“displayList.innerHTML = result;”希望至少打印出一张图片。我尝试了其他的东西，但它只是让我的代码混乱。我需要帮助。任何建议，指示或其他什么是好的。你能用我也能理解的方式解释你的答案吗？当你正在和一个孩子或某事说话时，想想我吧哈哈。感谢。

注意：在“hw1.txt”中，每个第三个索引（从索引0开始）是人的名字，旁边的索引（myArray [i + 1]）是图像文件（在.txt里面）像1.jpg，2.jpg，3.jpg，等等......）

<br/>
<span id="displayList">Photo here.</span>

<script type=text/javascript>
    if (typeof ActiveXObject != "undefined")                             // IE
        var req = new ActiveXObject("Microsoft.XMLHTTP");
    else                                                                             // Other browsers
        var req = new XMLHttpRequest();

    req.open('GET', 'hw1.txt', false);
    req.send(null);
    s = req.responseText;

    var myArray = s.split(";");
    var result = "";

    function nextItem() {

        for (i = 3; i < myArray.length; i = i + 3)
            result = result + "<img src='" + myArray[i + 1] + "'/>";
        displayList.innerHTML = result;

    }

</script>

<form name="ClickNext">
    <input type="button" value="Next Name" onclick="nextItem()" />
</form>

Answer 1

<span id="displayList">Photo here.</span>

<script type=text/javascript>
    if (typeof ActiveXObject != "undefined")                             // IE
        var req = new ActiveXObject("Microsoft.XMLHTTP");
    else                                                                             // Other browsers
        var req = new XMLHttpRequest();

    req.open('GET', 'hw1.txt', false);
    req.send(null);
    s = req.responseText;

    var myArray = s.split(","); //if images are comma(,) seperated then just split it from comma
    var index = 0;

    function nextItem() {
        if(typeof myArray[index] !== 'undefined') {
            displayList.innerHTML = "<img src='" + myArray[index] + "'/>";
            index += 1;
        }
    }

</script>

<form name="ClickNext">
    <input type="button" value="Next Name" onclick="nextItem()" />
</form>

Answer 2

首先，您不需要围绕该输入的表单，因为您没有真正发送表单。

您应该向input（或<a></a>或<button></button>）添加ID，例如id="next_name"，或者我猜您可以保留旧的方式来调用事件。：P

然后，你应该：

var position = 0;
var result = '';
document.getElementById('next_name').onclick = function(){
  if(position < myArray.length){
    result = result + "<img src='" + myArray[position + 1] + "'/>";
    displayList.innerHTML = result;
    position++;
  }
};

这个想法是使用一个变量来记住你在图像列表中的位置。使用后，您可以在列表中增加位置，以便下次用户单击该按钮时添加不同的图像。

如何使用HTML / Javascript循环显示一个图像？

2 个答案: