javascript - 在已经制作的 jquery 代码中的问题之间放置一些 2 秒的休息时间

Question

我有一个 jquery 代码，可用于将一个问题更改为另一个问题。他们自己的问题存储在 div 中。但是，我正在尝试解决如何在这些问题之间进行一些小的时间制动。

我目前唯一的解决方案是在特定时间隐藏/显示带有问题的每个 div，但这在代码方面真的很糟糕，我想要一些看起来很漂亮并且可以轻松更改的东西（时间-明智的）。

jQuery(function() {
      var $els = $('div[id^=question]'),
        i = 0,
        len = $els.length;
      $els.slice(1).hide();
      setInterval(function() {
        $els.eq(i).fadeOut(function() {
          i = (i + 1) % len
          $els.eq(i).fadeIn();
        })
      }, 15000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="question1"></div>

<div id="question2" class="question">


  <input type="radio" name="q1" value="non" id="non" style="visibility: hidden" checked><br>
  <label> <input type="radio" name="q1" value="1" id="guess" class="radio"  >Rain</label>
  <label> <input type="radio" name="q1" value="2" id="guess" class="radio"  >No rain</label><br>

</div> <br>

<div id="question3" class="question">


  <input type="radio" name="q2" value="non" id="non" style="visibility: hidden" checked><br>
  <label> <input type="radio" name="q2" value="1" id="guess" class="radio" >Rain</label>
  <label> <input type="radio" name="q2" value="2" id="guess" class="radio" >No rain</label><br>

</div> <br>

标签： javascripthtml

Answer 1

看看我的做法。我用普通的旧 CSS 解决了大部分问题。

const getNextQuestion = (current) => {
  let next = current.nextElementSibling;
  if (next.tagName !== 'DIV') {
    return;
  }

  return next;
}

let currentQuestion = document.querySelector('.is-open');
document.querySelector('button').addEventListener('click', () => {
  let currentQuestion = document.querySelector('.is-open');
  let nextQuestion = getNextQuestion(currentQuestion);

  currentQuestion.classList.remove('is-open');
  nextQuestion.classList.add('is-open');
  currentQuestion = nextQuestion;
});

.question {
  border: 1px solid red;
  background: tomato;
  margin-bottom: 25px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Open Sans';
  opacity: 0;
  visibility: none;
  transition: visibility 1s linear, opacity 1s linear;
}

.is-open {
  opacity: 1;
  visibility: visible;
}

<div>
  <div class="question is-open">
    Question 1
  </div>

  <div class="question">
    Questi
    <div>
      <div class="question is-open">
        Question 1
      </div>

      <div cla<div>
        <div class="question is-open">
          Question 1
        </div>

        <div class="question">
          Question 2
        </div>
      </div>


      <button>
Next Question
</button> ss="question"> Question 2
    </div>
  </div>


  <button>
Next Question
</button> on 2
</div>
</div>


<button>
Next Question
</button>