Jquery Content Cycle Next/Previous 不起作用

Question

我有一个定义列表，里面有很多文本。当用户来到页面时，我希望 jQuery 隐藏该内容的三分之二，在适当的地方添加下一个和上一个按钮，并淡入和淡出内容。内容的前三分之一是.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);
    });
});

Answer 1

您需要使用live 而不是click。查看文档。

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