fadeInとFadeOutを利用し回答ボタン押下で次の質問を表示させたい

Question

前提

JavaScriptを学んでいる初心者です
アドバイスをいただければ幸いです

実現したいこと

診断系ツールを作成しており
ボタンを押下すると質問を切り替えるような表現をしたいです
fadeInで問題を表示し、FadeOutで問題を非表示にするイメージです

発生している問題

3番目以降の問題をどうやって表示すれば良いか悩んでおります
いくつか試してみましたが、質問が同時に表示されたり、
反応せずに表示されなかったりと求めている挙動になりません

該当のソースコード

  <div class="aa">
<ul>
  <li id="Question01">Question01</li>
  <li id="Question02" style="display:none;">Question02</li>
  <li id="Question03" style="display:none;">Question03</li>
  <li id="Question04" style="display:none;">Question04</li>
  <li id="Question05" style="display:none;">Question05</li>
  <li id="Question06" style="display:none;">Question06</li>
</ul>
<div>
          <button class="answer-yes" id="yes">はい</button>
          <button class="answer-no" id="no">いいえ</button>
          <button class="answer-close-yes" id="close-yes">はいに近い</button>
          <button class="answer-close-no" id="close-no">いいえに近い</button>

$('button').on('click',function(){
  $('#Question01').fadeOut( 2000, liChange);
  function liChange(){
    $('#Question02').fadeIn();
  }
});

Answer 1

下記でどうでしょうか。

let n = 0;
const  q = $('.aa ul li');
$('button').on('click',function(){
  if (q.length - 1 > n) { 
    q.eq(n).fadeOut( 2000, liChange);
    function liChange(){
      q.eq(n += 1).fadeIn();
    }
  } else {
    alert('診断終了');
  }
});

Comments

[sky.visiter]

ご回答ありがとうございます
色々と調べていてご返信が遅れました
上記のコードで望んだ通りの挙動を確認できました

なるほど
eq()とif文を利用すれば順番に表示できるんですね
自分の中で噛み砕いて理解を進めていきます
ありがとうございます

Answer 2

「質問1が表示されている時にボタンを押されると質問2を表示」
「質問2が表示されている時にボタンを押されると質問3を表示」
...

ということでしょうから、「現在どの質問が表示されているか」という状態をどこかにしまっておく、あるいは現在のDOMから調べるなどとして、現在の状態から条件分岐させてはいかがでしょうか。

なお、「jQuery 診断」でググると、参考になりそうなコードが見つかると思いますので、そちらを参考にするのもいいかと思います。

Comments

[sky.visiter]

ご回答ありがとうございます
なるほど
if文など条件分岐が必要なんですね
後学のためにも必要なので、調べてみます