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

Jquery内容循环下一个/上一个不起作用

1 个答案: