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'); 
    }); 

});