多步驟jquery divs不顯示數據

Question

我已經創建了一個多步驟預訂系統，客戶將在頭上的4個步驟中填寫信息的步驟顯示，但問題是在那裏我想給用戶訪問，所以如果通過錯誤地用戶輸入他們有權訪問的不正確的信息跳出該步驟並更正他們的信息，任何人都可以幫助我，直到點擊該步驟時顯示該步驟，但事實是活動div不會消失。

$(document).ready(function() { 
 
    $('.booking_step').on('click', function() { 
 
     var step = $(this).attr('data-step'); 
 

 
     if(step == 1) { 
 
      $('.schedule').fadeOut(); 
 
      $('.minfo').fadeOut(); 
 
      $('.select_rm').fadeIn(2500); 
 
     } 
 

 
     if(step == 2) { 
 
      $('.select_rm').fadeOut(); 
 
      $('.minfo').fadeOut(); 
 
      $('.schedule').fadeIn(2500); 
 
     } 
 
    }); 
 
}); 
 

 
$(".step1").on('click', (function(e) { 
 
    $('.select_rm').fadeOut(); 
 
    $('.schedule').fadeIn(2500); 
 
})); 
 

 
$(".step2").on('click', (function(e) { 
 
    $('.schedule').fadeOut(); 
 
    $('.main_box').fadeIn(2500); 
 
})); 
 

 
$(".step3").on('click', (function(e) { 
 
    $('.minfo').fadeOut(); 
 
    $('.main_box').fadeIn(2500); 
 
}));

a { 
 
    cursor:pointer; 
 
} 
 

 
.booking_step { 
 
    cursor:pointer; 
 
    display:inline-block; 
 
    padding:0 20px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="steps"> 
 
\t \t <div class="booking_step complete" data-step="1"> 
 
\t \t \t <span class="bh_tittle">Clean Type</span> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="booking_step no_hd dt_schl" data-step="2"> 
 
\t \t \t <span class="bh_tittle">Schedule Date</span> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="booking_step no_hd dt_ad_t" data-step="3"> 
 
\t \t \t <span class="bh_tittle">Address</span> 
 
\t \t </div> 
 
</div> 
 

 
<div class="booking-flow-section select_rm" data-section="1" style="display: block;"> 
 
    <h1>Clean Type Form</h1> 
 
    <a class="step1">Next</a> 
 
</div> 
 

 
<div class="booking-flow-section schedule" data-section="2" style="display: none;"> 
 
    <h1>Schedule Date Form</h1> 
 
    <a class="step2">Next</a> 
 
</div> 
 

 
<div class="booking-flow-section main_box" data-section="3" style="display: none;"> 
 
    <h1>Address Form</h1> 
 
    <a class="step3">Next</a> 
 
</div>

我無法識別來div的將如何被隱藏一旦這是目前活躍。

Answer 1

更改爲下面的代碼應該工作請嘗試。我想這是你錯過了什麼。

$('.minfo').fadeOut();改爲$('.main_box').fadeOut();

<style type="text/css"> 
    a { 
    cursor:pointer; 
} 

.booking_step { 
    cursor:pointer; 
    display:inline-block; 
    padding:0 20px 
} 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div class="steps"> 
    <div class="booking_step complete" data-step="1"> 
     <span class="bh_tittle">Clean Type</span> 
    </div> 

    <div class="booking_step no_hd dt_schl" data-step="2"> 
     <span class="bh_tittle">Schedule Date</span> 
    </div> 

    <div class="booking_step no_hd dt_ad_t" data-step="3"> 
     <span class="bh_tittle">Address</span> 
    </div> 
</div> 

<div class="booking-flow-section select_rm" data-section="1" style="display: block;"> 
    <h1>Clean Type Form</h1> 
    <a class="step1">Next</a> 
</div> 

<div class="booking-flow-section schedule" data-section="2" style="display: none;"> 
    <h1>Schedule Date Form</h1> 
    <a class="step2">Next</a> 
</div> 

<div class="booking-flow-section main_box" data-section="3" style="display: none;"> 
    <h1>Address Form</h1> 
    <a class="step3">Next</a> 
</div>      <script type="text/javascript"> 
         $(document).ready(function() { 
    $('.booking_step').on('click', function() { 
     var step = $(this).attr('data-step'); 

     if(step == 1) { 
      $('.schedule').fadeOut(); 
      $('.main_box').fadeOut(); 
      $('.select_rm').fadeIn(2500); 
     } 

     if(step == 2) { 
      $('.select_rm').fadeOut(); 
      $('.main_box').fadeOut(); 
      $('.schedule').fadeIn(2500); 
     } 
    }); 
}); 

$(".step1").on('click', (function(e) { 
    $('.select_rm').fadeOut(); 
    $('.schedule').fadeIn(2500); 
})); 

$(".step2").on('click', (function(e) { 
    $('.schedule').fadeOut(); 
    $('.main_box').fadeIn(2500); 
})); 

$(".step3").on('click', (function(e) { 
    $('.minfo').fadeOut(); 
    $('.main_box').fadeIn(2500); 
})); 

          </script> 

Answer 2

而不是​​使用hide()。

​​有一個動畫。

---

也爲您的jQuery，你可以做一個簡單的修改：

$(".step1, .step2, .step3").on('click', (function(e) { 
    $('.select_rm').hide(); 
    $('.schedule').fadeIn(2500); 
})); 

這樣，你不要重複你的代碼。