JQuery隱藏/顯示不能正常工作

Question

新手，試圖混淆視野，代碼有什麼問題嗎？ 1-8行工作，那麼按鈕將不會繼續到下一個div。

$(document).ready(function() { 
    $('#personal-info, #cc-sub').hide() 

    $('.amount_radio_button').click(function() { 
     $('#donation-amount').hide('fast') 
     $('#personal-info').show('slow') 

     $('.nextBtn1').click(function() { 
      $('#personal-info').hide('fast') 
      $('#cc-sub').show('slow') 

      $('#submit').click(function() { 
       $('#cc-sub').hide('slow') 
       $('#thank_you').show('slow')  
      });      
     });      
    });  
});  

Answer 1

您需要設置彼此相鄰的事件處理程序，而不是彼此嵌套。目前，事件處理程序只會在其他事件被觸發時才被註冊。嘗試以下操作：

$(document).ready(function() { 
    $('#personal-info, #cc-sub').hide() 

    $('.amount_radio_button').click(function() { 
     $('#donation-amount').hide('fast') 
     $('#personal-info').show('slow') 
    });  

    $('.nextBtn1').click(function() { 
     $('#personal-info').hide('fast') 
     $('#cc-sub').show('slow')      
    }); 

    $('#submit').click(function() { 
     $('#cc-sub').hide('slow') 
     $('#thank_you').show('slow')  
    }); 
}); 

Answer 2

我認爲問題是你嵌套你的事件處理程序。你必須分別定義它們，而不是在彼此之內。

$(document).ready(function() { 
    $('#personal-info, #cc-sub').hide(); 

    // hide the donation amount, show person info next 
    $('.amount_radio_button').click(function() { 
     $('#donation-amount').hide('fast'); 
     $('#personal-info').show('slow'); 
    });  

    // hide personal info, show subscription info 
    $('.nextBtn1').click(function() { 
     $('#personal-info').hide('fast'); 
     $('#cc-sub').show('slow'); 
    }); 

    // hide subscription info, show thank you section 
    $('#submit').click(function() { 
     $('#cc-sub').hide('slow'); 
     $('#thank_you').show('slow'); 
    }); 

});