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

Question

我正在尝试获得可以看到部分完整内容的场景。要查看其他部分，用户必须单击 next 按钮。他们也可以通过 back 按钮返回。如果下一个和上一个 link 保留在所有部分内容中，那么每个内容的 link 都可以保留在下一个和上一个 link 中，这可能会有点容易。但是，不幸的是，我必须在每个内容之外保留下一个和上一个按钮。无论如何，到目前为止，我可以让下一个按钮正常工作。但是，我无法使后退按钮正常工作。另外，我意识到，这不是正确的方法。因为，我让按钮根据点击按钮的次数来工作。 If clicked once, show the content-1, if clicked for second time, show the content-2 and so on。但是，当上一个按钮起作用时，与内容建立关系和点击计数可能无法正常工作。那么，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

Answer 2

这个呢

HTML

<div class="content-holder">
    <div class="content" id="content-1" data-id='1' style="display: block;">
        <p>First Options</p>
        <input type="checkbox" />Item <br />
        <input type="checkbox" />Item
    </div>
    <div class="content" id="content-2" data-id='2'>
        <p>Second Options</p>
        <input type="checkbox" />Item <br />
        <input type="checkbox" />Item
    </div>
    <div class="content" id="content-3" data-id='3'>
        <p>Third Options</p>
        <input type="checkbox" />Item <br />
        <input type="checkbox" />Item
    </div>
    <button type="button" class="back">Back</button>
    <button type="button" class="next">Next</button>
</div>
<div class="end" data-id='4'>
    <p>Congratulation! You are done!</p>
    <button type="button" class="edit-previous">Edit Previous Options</button>
</div>

Javascript

$('body').on('click', '.next', function() { 
    var id = $('.content:visible').data('id');
    var nextId = $('.content:visible').data('id')+1;
    $('[data-id="'+id+'"]').hide();
    $('[data-id="'+nextId+'"]').show();

    if($('.back:hidden').length == 1){
        $('.back').show();
    }

    if(nextId == 4){
        $('.content-holder').hide();
        $('.end').show();
    }
});

$('body').on('click', '.back', function() { 
    var id = $('.content:visible').data('id');
    var prevId = $('.content:visible').data('id')-1;
    $('[data-id="'+id+'"]').hide();
    $('[data-id="'+prevId+'"]').show();

    if(prevId == 1){
        $('.back').hide();
    }    
});

$('body').on('click', '.edit-previous', function() { 
    $('.end').hide();
    $('.content-holder').show();
    $('#content-3').show();
});

Fiddle

Answer 3

为什么不将所有不同的 "contents" 都放在一个列表中，而让 JS 处理其他所有事情。这样，添加和删除内容非常简单，只涉及编辑 HTML 而不是 JS 代码。 Here's a Fiddle.

HTML:

<ul id="content">
    <li>
        <p>First Options</p>
        <input type="checkbox" />Item
        <br />
        <input type="checkbox" />Item
    </li>

    <li>
        <p>Second Options</p>
        <input type="checkbox" />Item
        <br />
        <input type="checkbox" />Item
    </li>

    <li>
        <p>Third Options</p>
        <input type="checkbox" />Item
        <br />
        <input type="checkbox" />Item
    </li>

    <li>
        <p>Congratulation! You are done!</p>
    </li>
</ul>

JS:

var content = $('#content');
content.css('list-style-type', 'none');
content.wrap('<div id="wrapper"></div>');

var wrapper = $('#wrapper');
wrapper.append('<button id="previous">Previous</button><button id="next">Next</button>');

$('#previous').hide();

var liElements = content.children();
liElements.hide();
liElements.first().show();

var liElementCount = liElements.length;

if (liElementCount > 0) {
    var counter = 0;

    function swapContent() {
        if (counter == 0) {
            $('#previous').hide();
        } else {
            $('#previous').show();
        }

        if (counter == liElementCount - 1) {
            $('#next').hide();
        } else {
            $('#next').show();
        }

        liElements.hide();
        $(liElements.get(counter)).show();
    }

    $('#next').click(function () {
        counter++;
        swapContent();
    });

    $('#previous').click(function () {
        counter--;
        swapContent();
    });
}

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

How to change content with next and previous button at same page

javascript

jquery