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

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

本文关键字：按钮上一个下一个一页更新时间：2023-09-26

我正在尝试获得一个可以看到完整内容的某些部分的场景。要查看其他部分，用户必须单击next按钮。他们也可以通过back按钮返回。如果下一个和上一个链接保留在所有部分内容上，以便每个内容的链接可以保留在下一个和上一个链接上，这可能会有点容易。但是，不幸的是，我必须在每个内容之外保留下一个和上一个按钮。无论如何，到目前为止，我可以使下一个按钮正常工作。但是，我无法使后退按钮工作。另外，我意识到这不是正确的方法。因为，我已经根据单击按钮的次数使按钮工作。 If clicked once, show the content-1, if clicked for second time, show the content-2 and so on .但是，当前一个按钮起作用时，与内容建立关系和点击计数可能无法正常工作。那么，通过jQuery处理这种情况的最佳方法是什么？

到目前为止，我的工作

试试这个 - 在这里工作演示

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

工作 JSFiddle 演示 - 单击

在此处查看更新的答案

这个呢

.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>

爪哇语

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

小提琴

为什么不在列表中包含所有不同的"内容"，而让JS处理其他所有事情。这样，添加和删除内容非常简单，只涉及编辑 HTML 而不是 JS 代码。这是一个小提琴。

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