Question

我正在尝试设置多步骤表单，其中默认情况下第一步是可见的，而其余步骤都被类“ hide”隐藏。我想使用“下一步”和“后退”按钮切换类，以便一次只能看到一个步骤。您能帮忙吗（已经花了一个小时）

<div class="steps">
        <div class="step1">step1</div>
        <div class="step2 hide">step2</div>
        <div class="step3 hide">step3</div>
        <div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
$('.next').click(function(){
    $('div:not(.hide)').next().removeClass('hide');
    $('.hide').prev().removeClass('hide')

})

Answer 1

$('.next').click(function() {
  // find the div that is not hidden
  var $current = $('.steps div:not(.hide)');
  
  // only perform logic if there is a proceeding div
  if ($current.next().length) {
    // show the next div
    $current.next().removeClass('hide');
    // hide the old current div
    $current.addClass('hide')
  }
});

$('.back').click(function() {
  // find the div that is not hidden
  var $current = $('.steps div:not(.hide)');
  
  // only perform logic if there is a preceeding div
  if ($current.prev().length) {
    // show the previous div
    $current.prev().removeClass('hide');
    // hide the old current div
    $current.addClass('hide')
  }
});

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
  <div class="step1">step1</div>
  <div class="step2 hide">step2</div>
  <div class="step3 hide">step3</div>
  <div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>

Answer 2

您可以添加一个当前步骤变量来跟踪当前显示的步骤，并添加两个css来样式化和显示您的内容。

jQuery(function($) {
  let currentstep = 1;
  let maxsteps = 4;

  function showstep(step) {
    let step_c = '.step' + step;
    for (i = 1; i <= maxsteps; i++) {
      var step_selector = '.step' + i;
      $(step_selector).removeClass('show');
      $(step_selector).addClass('hide');
    }
    $(step_c).removeClass('hide');
    $(step_c).addClass('show');
  };

  $('.next').click(function() {
    
    currentstep = currentstep + 1;
    currentstep = (currentstep % (maxsteps + 1));
    if (currentstep == 0) currentstep = 1;
    showstep(currentstep);
  });
  $('.back').click(function() {
    
    currentstep = currentstep - 1;
    currentstep = (currentstep % (maxsteps + 1));
    if (currentstep == 0) currentstep = 4;
    showstep(currentstep);
  });
});

.hide {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
  <div class="step1 show">step1</div>
  <div class="step2 hide">step2</div>
  <div class="step3 hide">step3</div>
  <div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>

Answer 3

我将Taplar的答案转换为jQuery插件。

实际上，您是在使用上一个和下一个功能向左或向右导航。这些功能在同级元素之间导航。

(function() {
  $.fn.moveRight = function(className) {
    var $curr = this.find('div:not(.' + className + ')');
    if ($curr.next().length) $curr.next().removeClass(className);
    else this.find('div:first-child').removeClass(className);
    $curr.addClass(className);
    return this;
  };
  $.fn.moveLeft = function(className) {
    var $curr = this.find('div:not(.' + className + ')');
    if ($curr.prev().length) $curr.prev().removeClass(className);
    else this.find('div:last-child').removeClass(className);
    $curr.addClass(className);
    return this;
  };
})(jQuery);

$('.next').on('click', (e) => $('.steps').moveRight('hide'));
$('.back').on('click', (e) => $('.steps').moveLeft('hide'));

.hide {
  display: none;
}
.nav {
  width: 260px;
  text-align: center;
}
.nav .nav-btn::selection { background: transparent; }
.nav .nav-btn::-moz-selection { background: transparent; }
.nav .nav-btn {
  display: inline-block;
  cursor: pointer;
}
.steps {
  width: 260px;
  height: 165px;
  border: thin solid black;
  text-align: center;
  line-height: 165px;
  font-size: 3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
  <div class="step1">step1</div>
  <div class="step2 hide">step2</div>
  <div class="step3 hide">step3</div>
  <div class="step4 hide">step4</div>
</div>
<div class="nav">
<div class="nav-btn back">&#91;&nbsp;&#60;&#60;&nbsp;Back&nbsp;&#93;</div>
<div class="nav-btn next">&#91;&nbsp;Next&nbsp;&#62;&#62;&nbsp;&#93;</div>
</div>

Answer 4

尝试将2个动作组合为一个，就像这样：

$('.next').click(function(){
    $('.steps div:not(.hide)').addClass('hide').next().removeClass('hide');
})

这样，您可以在当前div上添加.hide类，然后在下一个div上将其删除。

通过将.next（）替换为.previous（），您可以对“后退”按钮使用类似的功能

单击“下一步”或“上一步”切换类

4 个答案: