javascript - 如何使用同一页面的下一个和上一个按钮更改内容

Question

我正在尝试获得一个可以看到部分完整内容的场景。要查看其他部分，用户必须单击下一步按钮。他们还可以通过后退按钮返回。如果将下一个和上一个链接保留在所有部分内容中，以便每个内容的链接都可以保留在下一个和上一个链接上，这可能会有点容易。但是，不幸的是，我必须在每个内容之外保留下一个和上一个按钮。无论如何，到目前为止我可以让下一个按钮正常工作。但是，我无法使后退按钮起作用。另外，我意识到这不是正确的方法。因为，我根据点击按钮的次数使按钮起作用。 如果点击一次，则显示content-1，如果点击第二次，则显示content-2，以此类推。但是，当上一个按钮可以工作时，与内容建立关系和点击计数可能无法正常工作。那么，jQuery 处理这种情况的最佳方法是什么？

So far, my work

Answer 1

试试这个- Working Demo Here

var counter = 1;
$('body').on('click', '.next', function() { 
    $('.content').hide();

    counter++;
    $('#content-'+counter+'').show();

    if(counter > 1) {
        $('.back').show();
    };
    if(counter > 3) {
        $('.content-holder').hide();
        $('.end').show();
    };

});

$('body').on('click', '.back', function() { 
    //alert(counter);
    counter--;
    $('.content').hide();
    var id = counter;    
    $('#content-'+id).show();
    if(counter<2){
            $('.back').hide();
    }


});

$('body').on('click', '.edit-previous', function() {  // UPDATED CODE
    $('.end').hide();
    $('.content-holder').show();
    $('#content-3').show();
    counter--;  // issue resolved of click twice
});

<强> Working JSFiddle Demo - Click

查看更新的答案 Here