Javascript Jquery内容循环下一个/上一个不工作

我有一个定义列表，里面有很多文本。当用户来到页面时，我希望jQuery隐藏三分之二的内容，在适当的地方添加一个next和previous按钮，并淡入淡出内容。内容的前三分之一是.issue-group-1，第二个是.issue-group-2，第三个是.issue-group-3

我试着设置它，当用户点击下一个按钮时，下一个按钮改变了类，因此在用户下一次点击它时，它的行为会有所不同，也就是说，它会将他们带到第三页而不是第二页

现在，“下一页/上一页”按钮在第一页和第二页上起作用，但第三页的“下一页”按钮不起作用

我的代码可能太长了，这可能不是最好的方法——我对jquery还不熟悉。任何建议都会有帮助

$(document).ready(function(){
    $('.issue-group-2, .issue-group-3').hide();
    $('a#next-button.page1').fadeIn(500);
    $('a#next-button.page1').click(function() {
        $(this).removeClass('page1').addClass('page2');
        $('.issue-group-1').fadeOut(500, function() {
            $('.issue-group-2').fadeIn(500);
        });
        $('a#previous-button').fadeIn(500);
    });
    $('a#previous-button.page2').click(function() {
        $('#next-button.page2').removeClass('page2').addClass('page1');
        $('.issue-group-2').fadeOut(500, function() {
            $('.issue-group-1').fadeIn(500);
        });
        $('a#previous-button').fadeOut(500);
    });
    $('a#next-button.page2').click(function() {
        $('a#previous-button').removeClass('page2').addClass('page3');
        $('.issue-group-2').fadeOut(500, function() {
            $('.issue-group-3').fadeIn(500);
        });
        $('a#next-button').fadeOut(500);
    });
    $('a#previous-button.page3').click(function() {
        $(this).removeClass('page3').addClass('page2');
        $('.issue-group-2').fadeOut(500, function() {
            $('.issue-group-2').fadeIn(500);
        });
        $('a#next-button').fadeIn(500);
    });
});

您需要使用而不是单击。查看文档

$('a#next-button.page1').live("click", function() {...});
$('a#previous-button.page2').live("click", function() {...});
$('a#next-button.page2').live("click", function() {...});
$('a#previous-button.page3').live("click", function() {...});