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">
		<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>

我无法识别为什么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

而不是fadeOut()使用hide()。

fadeOut()上有动画。

同样对于你的jQuery，你可以做一个简单的修改：

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

这样，您就不会复制代码。

多步jquery div不显示数据

2 个答案: