JavaScript

Question

我想单步执行带有下一个和上一个按钮的数组。每个按钮都调用相同的功能。我有以下代码...

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

有什么帮助吗？

Answer 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/

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

如果仍然无效，请提供更多详细信息。

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

JavaScript - Move through array with a next and prev button

arrays

jquery

button