Question

<div class="form">
   <div class="step">This is step 1</div>
   <div class="step">This is step 2</div>
   <div class="step">This is step 3</div>
   <div class="step">This is step 4</div>

   <button id="prevBtn">Prev</button>
   <button id="nextBtn">Next</button>
</div>

我知道如何遍历div并让每个div都没什么大不了的，但是我没有看到如何遍历div并只显示第一个的逻辑，然后onclick next显示第二个等等（和以前一样）。

无论是vanilla JS还是jQuery解决方案都可以作为解决方案，但我真正想要的是，如果有人能够解释其背后的确切逻辑，因为我无法真正看到它。

我可以发布一些我已经完成的代码，但这不是问题，而是如何编程逻辑

非常感谢

Answer 1

使用:visible查找当前显示的DIV，.next()和.prev()前进和后退。

＆＃13;

$("#nextBtn").click(function() {
  var nextDiv = $(".step:visible").next(".step");
  if (nextDiv.length == 0) { // wrap around to beginning
    nextDiv = $(".step:first");
  }
  $(".step").hide();
  nextDiv.show();
});

$("#prevBtn").click(function() {
  var prevDiv = $(".step:visible").prev(".step");
  if (prevDiv.length == 0) { // wrap around to end
    prevDiv = $(".step:last");
  }
  $(".step").hide();
  prevDiv.show();
});

＆＃13;

.step {
  display: none;
}
div.step:first-child {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <div class="step">This is step 1</div>
  <div class="step">This is step 2</div>
  <div class="step">This is step 3</div>
  <div class="step">This is step 4</div>

  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>
</div>

＆＃13;

Answer 2

这就是我尝试使用一些有用的方法来解决这个问题的方法，例如next，prev，first和last +以及CSS {{1} } class显示当前块。

＆＃13;

active

＆＃13;

var $steps = $('.step');

$('#nextBtn').click(function() {
    var $next = $steps.filter('.active').removeClass('active').next('.step');
    if (!$next.length) $next = $steps.first();
    $next.addClass('active');
});

$('#prevBtn').click(function() {
    var $prev = $steps.filter('.active').removeClass('active').prev('.step');
    if (!$prev.length) $prev = $steps.last();
    $prev.addClass('active');
});

＆＃13;

.step {
    margin-bottom: 10px;
    padding: 10px;
    background: #DDD;
    display: none;
}
.step.active {
    display: block;
}

＆＃13;

Answer 3

我曾尝试使用基于索引的代码。试试吧

       var index = 0;
    $(function () {
        $('.step:not(:first)').hide();
        $('#nextBtn').click(function () {
            if (($('.step').length - 1) >= index) {
                $('.step:eq(' + index + ')').hide();
                index++;
                $('.step:eq(' + index + ')').show();
            }
        });
        $('#prevBtn').click(function () {
            if (index != 0) {
                $('.step:eq(' + index + ')').hide();
                index--;
                $('.step:eq(' + index + ')').show();
            }
        });
    });

javascript / jquery循环遍历div并使用click事件添加next / prev按钮

3 个答案: