Question

我试图在可以看到某些部分完整内容的情况下尝试。要查看其他部分，用户必须单击next按钮。他们也可以通过back按钮返回。如果下一个和先前的链接保留在所有部分内容上，则可能有点容易，使得每个内容的链接可以保持在下一个和前一个链接。但是，不幸的是，我必须在每个内容之外保留下一个和上一个按钮。无论如何，我可以让下一个按钮工作到目前为止。但是，我无法使按钮工作。而且，我意识到这一点，这不是正确的方法。因为，我根据点击按钮的次数使按钮工作。 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

为什么不拥有所有不同的内容＆＃34;在列表中，让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();
    });
}

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

3 个答案: