JavaScript - 使用下一个和上一个按钮在数组中移动答案

【问题标题】：JavaScript - Move through array with a next and prev buttonJavaScript - 使用下一个和上一个按钮在数组中移动
【发布时间】：2015-05-08 01:56:57
【问题描述】：

我想通过一个带有下一个和上一个按钮的数组。每个按钮调用与其所在的相同的函数。我有以下代码...

    function displayPic(i) {
        if (i == 0) {
            $('#map_holder').empty();
            $('#map_holder').append(picArray[i] + '<br><input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');

            if (i == picArray.length - 1) {
                $('#map_holder').empty();
                $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />');
            }
            else {
                $('#map_holder').empty();
                $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />&nbsp;&nbsp;&nbsp;&nbsp;<input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');
            }
        }
    }

有什么帮助吗？

【问题讨论】：

查看生成的 HTML。它应该类似于onclick="displayPic(01)" 和onclick="displayPic(12)"。你能猜出你需要改变什么吗？此外，如果i > 0，displayPic 将不会做任何事情。
@charlietfl：看起来不像。

标签： javascript jquery arrays button

【解决方案1】：

我不建议每次显示新图像时都添加按钮，这会使操作更加复杂。使用全局变量i 并使用<img> 和<button id='prev'> 和<button id='next'> 尽早构建表单怎么样？

<div id='map_holder'></div>//this will display the image
<button id="prev">Prev</button>
<button id="next">Next</button>

var i = 0;
displayPic(0); //show the first photo initially

$('#prev').click(function(){
    i--;
    displayPic(i);
});

$('#next').click(function(){
    i++;
    displayPic(i);
});

function displayPic(i) {        
    $('#map_holder').empty();
    $('#map_holder').append(picArray[i]);

    if(i == 0) 
        $('#prev').hide();
    else  
        $('#prev').show();     

    if(i == picArray.length-1)
        $('#next').hide();
    else
        $('#next').show();   
}

演示：https://jsfiddle.net/f4j884cs/1/

【讨论】：

您可能想解释为什么他们的代码不起作用，以便他们从错误中吸取教训。
我想每次都渲染新的图像和按钮。第一张图片没有上一个按钮，最后一张图片没有下一个按钮。

【解决方案2】：

查看您的代码，有一个问题。外部块检查if (i == 0)，然后内部块检查if (i == picArray.length - 1)。内部块条件在正常情况下永远不会评估为true，因为外部if (i == 0) 条件保证i 的值是0。

试试这个开始：

function displayPic(i) {
    if (i == 0) {
        $('#map_holder').empty();
        $('#map_holder').append(picArray[i] + '<br><input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');
    }
    else if (i == picArray.length - 1) {
        $('#map_holder').empty();
        $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />');
    }
    else {
        $('#map_holder').empty();
        $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />&nbsp;&nbsp;&nbsp;&nbsp;<input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');
    }
}

如果这仍然不起作用，请提供更多详细信息。

【讨论】：

是的，我已经尝试过几次了。下面提供的是单击“显示图片”时的初始化程序。然后它会生成一个图像和一个下一步按钮并调用 displayPic 函数。 $('#map_holder').append(picArray[0] + '
');