JavaScript-使用“下一步”和“上一步”按钮在数组中移动

我想通过“下一步”和“上一步”按钮逐步遍历数组。每个按钮调用与中相同的函数。我有以下代码

    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 + ');" />');
            }
        }
    }

功能显示pic（i）{
如果（i==0）{
$（'map#u holder'）。空（）；
$（“#map_holder”）.append（picArray[i]+”
）；
if（i==picArray.length-1）{
$（'map#u holder'）。空（）；
$（“#map_holder”）.append（picArray[i]+”
）；
}
否则{
$（'map#u holder'）。空（）；
$（“#map_holder”）.append（picArray[i]+”
）；
}
}
}

---

有什么帮助吗？

我不建议每次显示新图像时都添加按钮，这样会使它更复杂。使用全局变量

i

并尽早使用

和

和

构建表单如何

<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();   
}

//这将显示图像
上
下一个
var i=0；
显示pic（0）//最初显示第一张照片
$（'#prev'）。单击（函数（）{
我--；
(一)；
});
$（“#下一步”）。单击（函数（）{
i++；
(一)；
});
函数显示pic（i）{
$（'map#u holder'）。空（）；
$（'map#u holder'）。追加（picArray[i]）；
如果（i==0）
$（'#prev'）.hide（）；
其他的
$（'#prev'）.show（）；
if（i==picArray.length-1）
$（“#下一步”）.hide（）；
其他的
$（“#下一步”）.show（）；
}

---

演示：

查看您的代码，出现了一个问题。外部块检查

if（i==0）

然后内部块检查

if（i==picArray.length-1）

。在正常情况下，内部块条件永远不会计算为

true

，因为

i

的值由于外部

if（i==0）

条件而保证为

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 + ');" />');
    }
}

功能显示pic（i）{
如果（i==0）{
$（'map#u holder'）。空（）；
$（“#map_holder”）.append（picArray[i]+”
）；
}
else if（i==picArray.length-1）{
$（'map#u holder'）。空（）；
$（“#map_holder”）.append（picArray[i]+”
）；
}
否则{
$（'map#u holder'）。空（）；
$（“#map_holder”）.append（picArray[i]+”
）；
}
}

---

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

查看生成的HTML。它应该看起来像

onclick=“displayPic（01）”

和

onclick=“displayPic（12）”

。你能猜出你需要改变什么吗？另外，

displayPic

如果

i>0

@charlietfl:看起来不是这样的话，那就什么也做不了。你可能想解释一下为什么他们的代码不起作用，这样他们就可以从错误中吸取教训。我想每次都呈现新的图像和按钮。第一张图片没有“上一张”按钮，最后一张图片没有“下一张”按钮。是的，我已经试过几次了。下面提供的是单击“显示图片”时的初始值设定项。然后，它生成一个图像和一个next按钮，并调用displayPic函数$（“#map_holder”）.append（picArray[0]+”
）；