Jquery內容循環Next/Previous not working

Question

我有一個包含大量文本的定義列表。當用戶訪問該頁面時，我希望jQuery隱藏該內容的三分之二，在適當的位置添加下一個和上一個按鈕，並淡入淡出內容。內容的前三分之一是第一組，第二組是第二組，第二組是第三組，第三組是組。

我試圖設置它，以便當用戶點擊下一個按鈕時，下一個按鈕會改變類，從而在用戶下一次單擊它時採取不同的行爲（也就是說，它會將它們轉到第三個頁面，而不是第二，

眼下，下一首/上按鈕工作的第一和第二「頁」，但接下來的按鈕，第三頁是行不通的。

我的代碼可能太長了，這也許不是最好的方法 - 我是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() {...});