Question

这是我在这里的第一篇文章，请原谅我，如果我犯了一些错误。关于jquery，我也很新。

所以，我一直在与这个jquery代码作斗争，我想做的是每个div =＆＃34; step＆＃34;按下按钮后显示或隐藏，淡入或淡出。

我按下一个按钮后试图链接jquery，一个div隐藏，然后是下一个div显示。我已经阅读了很多关于这个问题的内容，但我并不认为我犯了任何错误，但却没有工作。

关于什么打破它的任何想法？

以下是代码：

＆＃13;

$(document).ready(function() {
  $('#btnsteps').click(function() {
    $('#step1').hide(1000, function() {
      $("#step2").show(1000, function() {
        $('#btnsteps2').click(function() {
          $('#step2').hide(1000, function() {
            $("#step3").show(1000);
          });
        });
      });
    });
  });
});

＆＃13;

<div id="form">

  <div class="register">
    <!--step1-->
    <div id="step1">
      <p>ARE YOU READY ?</p>
      <button id="btnsteps" type="submit">YES &raquo;</button></div>
    <!--end step 1-->

    <!--step 2-->
    <div id="step2" class="hidden">
      <p>ARE YOU WANT TO JOIN FOR FREE ?</p>
      <button type="submit" id="btnsteps2">YES &raquo;</button></div>
    <!--end step 2-->
    <!--step 3-->
    <div id="step3" class="hidden">
      <p>THEN YOU MUST KNOW</p>
      <button id="btnjoin" type="submit">Join me &raquo;</button></div>
    <!--end step 3-->

  </div>
  <!-- fin register-->



</div>
<!-- fin form-->

＆＃13;

Answer 1

写下这样的东西：

＆＃13;

$(document).ready(function(){
    $('#step1').show();
    $('.btnsteps').click(function() {
       $(this).closest('.stepdiv').next('.stepdiv').show();
       $(this).closest('.stepdiv').hide(); 
    });
});

＆＃13;

<div id="form">

<div class="register"> 
          <!--step1-->
          <div id="step1" class="stepdiv">
           <p>ARE YOU READY ?</p>
           <button class="btnsteps" type="submit">YES &raquo;</button>
          </div>
          <!--end step 1--> 
           
          <!--step 2-->
          <div id="step2" class="hidden stepdiv">
           <p>ARE YOU WANT TO JOIN FOR FREE ?</p> 
           <button class="btnsteps" type="submit">YES &raquo;</button>       
          </div>
          <!--end step 2--> 
          <!--step 3-->
          <div id="step3"  class="hidden stepdiv">
           <p>THEN YOU MUST KNOW</p>
           <button class="btnsteps" type="submit">YES &raquo;</button>
           </div>
         
          <!--end step 3--> 
        </div>
<!-- fin register-->

        
       
    </div>
<!-- fin form-->

＆＃13;

Answer 2

js code：

$(document).ready(function(){
    $('#btnsteps').click(function() {
        $('#step1').hide(1000);
        $("#step2").show(1000);
    });
    $('#btnsteps2').click(function() {
        $('#step2').hide(1000);
        $("#step3").show(1000);
    )};
});

Answer 3

JS：

{{1}}

这是你想要的吗？

Jquery链接隐藏/显示fadein / fadeout

3 个答案: